In the bad old days of table layouts, centering text or
a block element within its container was pretty simple. The
<td>, defaults to
valign="center". In CSS, the equivalent
The similarity between valign and vertical-align throws
many CSS tyros into confusion. The
vertical-align property applies to table cells as one might
expect. In non-table-cell containers, though, the property
applies to the alignment within the inline box.
IE≤7 is the Stumbling Block
It is a simple matter to use the display property to set a container to render as if it were a table cell. The trouble is, IE doesn't properly support the CSS2.1 display property values.
We have to somehow work around IE's shortcomings. For centering the whole page1, a single-celled table will not cause excessive markup weight, nor should it cause accessibility issues. We have to rely on IE's buggy implementation of the position property for CSS based centering efforts.
Modern Browsers Use Display Property
By setting the display property to table-cell, the vertical-align property works the same as in an HTML table. With that in mind, it becomes a trivial matter to center the contents of a block element. Centering vertically within an inline element becomes a little tricky for modern browsers, and an outright silliness to make it work for IE.
- The idea of centering the entire page in the viewport is a holdover from print. The web is not print, and the viewport does not have fixed dimensions; it is not a sheet of paper, a brochure or a billboard. The print layout paradigm should be discarded.