Saturday, September 13, 2008

Vertical Centering a fixed width and height website using CSS

Testing out CSS vertical centering methods for a fixed width / height website - have been using horizontal centering via auto margins for ages but vertical centering is necessary for some upcoming work.

A good explanation of historical methods and tutorial:
http://www.search-this.com/2008/05/15/easy-vertical-centering-with-css/
FIXED HEIGHT CENTERING
Live example - a simple method using a negative margin floated div like a spacer to do it. it also centers the background image which is great.
http://www.pmob.co.uk/search-this/center2.htm

CENTERING WHEN NO FIXED HEIGHT
Another method thats a bit more complex that works for if the div you want to center has no fixed height. Its uses display:table and some IE fixes.
http://www.pmob.co.uk/pob/vertical-center4.htm

Remember background can be centered vertically too, like this:
background:#000 url(images/vertbkrnd.jpg) repeat-x center center fixed;
and apparently need also body height 100% like:
html,body{
height:100%;
margin:0;
padding:0;
}

and a note - it dosnt have to be exactly centered, it could be say 30% from the top to be more compositionally nice.