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

111 Figure 4-4: One box centered inside another.

Consider a situation where a div is the child of the body element. You want to center that
div but, because every browser window can be a dif erent width, you don't know how wide
or narrow the body will be. As long as you're giving the div a specii c width, no problem:
Just auto the right and let margins (see Figure 4-5).

div#main { width : 55em ; margin : 0 auto ;}

h is works because the CSS specii cation says that when an element has a specii c width, and
both the right and let margins are automatically determined, then the browser takes the
dif erence between the widths of the element and its container, splits that dif erence in half,
and applies one half to the let margin and the other to the right. h us the box is centered.

h is will not center the text within that box, of course. If you want to do that too (see also
Figure 4-6):

div#main { width : 55em ; margin : 0 auto ; text-align : center ;}

Note that in a case where the div is wider than its container, browsers will let -justify the box
(not the content) in let -to-right languages, and right-justify the box in right-to-let languages.