Centering in the Viewport with CSS

Modern Browsers

This very simple, really. We make the <div id="wrapper"> element {display: table;}, and set height to 100%. A container, <div id="cell"> is set to {display: table-cell;} and encloses the entire page.

Obsolete Browsers

IE≤7 does not grok the table group of display property values. Fortunately(?), there's a bug in its support of the position property we can take advantage of. Be sure to use the conditional comments to feed IE, because Microsoft promises that IE8 will be fully CSS compliant. IE8 is highly compliant.