Question

I would like to align my container div to center vertically just like it is aligning himself horizontally because of margin: auto;. I’ve searched some time on google on how to do that but it does not seem to be working for me. Maybe there is some kind of universal way to do that, as easy as margin: auto; method for horizontal centering? Because it seems for me very strange that we live in 2011 year and there is still no simple css command for doing this task…

#container
{
    margin: auto;
    width: 960px;
    height: 640px;
    background-color: brown;
}

Answer 1

Can it be even simpler…

html, body {
    overflow:hidden
}
#container {
    width:960px;
    height:640px;
    position:absolute;
    top:50%;
    left:50%;
    margin-top:-320px;
    margin-left:-480px;
    background:brown
}

The overflow:hidden is to hide the scrollbar that appears (html for IE6 and body for IE5). I don’t know why this happens.

But if you want to keep it scrollable if the browser window is smaller, just make the height 639px and remove the overflow:hidden.