Russ Weakley
08-Nov-03
How do you center a containing block on a page using
CSS? There are two main methods and the choice should
be made based on whether your page layout is liquid
(will move in and out depending on the size of the
browser window) or fixed width.
Centering liquid layouts
Liquid layouts are easy to center using margins on
each side of the containing box. The margins can be
set with em, pixel or percentage units.
div#container
{
margin-left: 10%;
margin-right: 10%;
}
Centering fixed-width layouts
Theoretically, you should be able to apply auto margins
to the left and right of the containing block and
it should center on the page.
The W3C Visual formatting model states: "If
both 'margin-left' and 'margin-right' are 'auto',
their used values are equal. This horizontally centers
the element with respect to the edges of the containing
block."
So, a containing block should be able to
be centered using the following rules:
div#container
{
margin-left: auto;
margin-right: auto;
width: 50em;
}
However, some browsers do not center the
containing blocks using this method as they ignore
the auto margins. These browsers include:
NN4 (Mac and Win)
Win/IE4
Win/IE5
Win/IE5.5
Win/IE6 (when in quirks-mode)
By adding two simple rules, this problem can be overcome
in all of the browsers mentioned above, excluding
NN4.
1. Center the body
While these browsers ignore auto margins, they will
follow "text-align: center". If this is
applied to the body, the containing block will center
correctly. So, a new rule is added:
body
{
text-align: center;
}
div#container
{
margin-left: auto;
margin-right: auto;
width: 50em;
}
2. Resetting text-align
The only problem with this new rule is that all content
on the page is now center-aligned. To overcome the
center alignment problem, a new declaration is added
within the containing block rule set - "text-align:
left". The final CSS code is:
body
{
text-align: center;
}
div#container
{
margin-left: auto;
margin-right: auto;
width: 50em;
text-align: left;
}
See the results
The first sample page shows a containing block that
has been centered on the page using auto margins,
but no centering on the body element.
Sample page with no "text-align: center"
Browsercam shots of sample page with no "text-align:
center"
The second sample page shows a containing block that
has been centered on the page using auto margins,
but also has centering on the body element, and "text-align:
left" on the containing block.
Sample page with "text-align: center"
and "text-align: left"
Browsercam shots of sample page with "text-align:
center" and "text-align: left"
