Centering sites vertically

18 May 2005

Documented here as much for my own reference as anything else!

Back in the bad old days of table-based layout, there used to exist a way to vertically align content through using the valign element. For whatever reason, CSS doesn’t have an equivalent vertical control for objects… but there is a way around this.

By setting a property to display: table-cell;, it’s possible, through the use of vertical-align in CSS, to essentially achieve what we used to be able to do with valign.

For example,
display: table-cell;<br /> vertical-align: middle;
will make the contents of the element to which those styles are applied display in its centre – useful for vertically centering content on a page.

You can see this in action on this W3C CSS Tips & Tricks page.