A new way to vertically centre with CSS

I just discovered a new way to vertically (and horizontally) centre objects in CSS!

All it needs is 1 line of CSS (no dummy objects either!)

#theobject { position:absolute; top:0; bottom:0; left:0; right:0; margin:auto; }

After testing on all of my browsers, I tried it on browsershots.org, which lets you see screenshots of your webpage on many diferent browsers. You may have guessed, the only problem is that Internet Explorer ≤ 7 doesn’t support it (grr). The sort of good news is that Internet Explorer 8 (still beta) DOES support this, so this technique may be usable in the (hopefully not to distant) future.

You can view my test page.

One Comment to A new way to vertically centre with CSS

  1. It doesn’t work in IE6.

Leave a Comment