LAYOUTS - CSS: Professional Techniques for Modern Layout - page 108

110 Figure 4-3: Great big dotted outlines.

CENTERING BLOCK BOXES
Sometimes you want to center a whole element within its container (even when that container
is the body element). h ere isn't a specii c element-centering property in CSS, but you can get
the same ef ect with margins.

If you have a tightly locked layout, then it's pretty simple: Figure out how much space you
need on each side of the centered element, and set up the appropriate margins (see Figure
4-4). For example:

div#contain { width : 800px ;}
div#main { width : 760px ; margin : 0 20px ;}

In that case, it's just simple math. In fact, you wouldn't even need the div#main rule. You
could just use padding on the container:

div#contain { width : 760px ; padding : 0 20px ;}

Same visual result, dif erent approach.

In a situation where you have an element with a specii c width but you don't know how large
its container will be, you still use margins. You just get a little sneaky about it.