July 16, 2008
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.
It doesn’t work in IE6.