Jump to Navigation

Vertical Centering

This is a much better way to do vertical centering (e.g. for a neat-looking login prompt or a loading animation) than using display:table & display:table-cell (which doesn’t work in really modern browsers like Chrome anyway):

#outer {
    position: absolute;
    left: 50%;
    top: 50%;
    /* Half of X, not '(X / 2)' */
    margin-left: -(X / 2) <units>;
    /* Half of Y, not '(Y / 2)' */
    margin-top: -(Y / 2) <units #2>;
}
#inner {
    position: absolute;
    width: X <units>;
    height: Y <units #2>;
}

And then you can use whatever block-level element(s) you like. Please, please, please use HTML5 elements if it would be appropriate to do so. If you have to support older browsers which may not recognize them, use an HTML5 shiv to make them available to JavaScript and set them to display: block; in your CSS. Do not use the HTML5reset stylesheet; it erases quite a few sensible defaults for elements everyone already supports for no good reason.