css - Method for full-screen vertically-centered HTML page?

Question

I'm looking for a valid cross-browser solution for an HTML page which:

1. Consumes 100% of the screen height, with no overflow (i.e. no scrolling)
2. has a vertically (and horizontally) centered <div> which will hold the main content

I know vertical centering is possible when the wrapping container has a static height. Is adjusting this height to browser window height something feasable? (Preferably, no JS should be used.)

Answer 1

Depends on what you mean with "cross browser". Following works fine with all current, standards compatible ones (thus not IE6):

HTML:

<div id="a">
    <div id="b">
        <div id="content"></div>
    </div>
</div>

CSS:

html, body, #a {
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
}

#a {
    display: table;
}

#b {
    display: table-cell;
    margin: 0;
    padding: 0;

    text-align: center;
    vertical-align: middle;
}

#content {
    border: 5px solid red;
    width: 100px;
    height: 100px;
    margin: auto;
}

Live example:

http://jsfiddle.net/mGPmr/1/