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.