skip to table of contents

Vertical Centering

In the bad old days of table layouts, centering text or a block element within its container was pretty simple. The table-cell, <td>, defaults to valign="center". In CSS, the equivalent property is {vertical-align: center;}. 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.

  1. 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.