Simon Willison’s Weblog

Vertical centering with CSS

Lots of people said it couldn’t be done (myself included), but evidently we were wrong. Joe Gillespie shows how to achieve vertical centering with CSS in the latest edition of WPDFD. Via Craig Saila, who also has an experimental piece showing how the height of three divs can be set to the height of the tallest of the three, using javascript.

Posted 7th January 2003 at 10:35 am

This is Vertical centering with CSS by Simon Willison, posted on 7th January 2003.

View blog reactions

Next: Wiki hosts and ticket stubs

Previous: Using page titles properly

2 comments

Pretty cool stuff... if only I could get some revision done :/
Swannie - 7th January 2003 11:15 - #
Hardly a new technique, I've been using it for ages (works well for holding screens, see http://19th.co.uk or http://red.uk.com). There are some other pitfalls that the article doesn't mention though - IE5/mac sometimes doesn't show *anything* on the page, and users with small screens can sometimes have the content go totally off the screen. There's an official CSS 2 way of vertically centering, but it only works in Gecko and Opera 7 - set position:absolute, left/right/top/bottom to 0, margin:auto and then any width and height - http://tom.me.uk/2003/1/css-centering.html for a quick example.
Tom Gilder - 7th January 2003 13:33 - #

Comments are closed.

Previously hosted at http://simon.incutio.com/archive/2003/01/07/verticalCenteringWithCSS