Vertical centering with CSS

One of the biggest weaknesses of CSS is lack of support for vertical centering. There are many tricks to achieve this and each of them has advantages and disadvantages.

The method I use is based on method from jakpsatweb's web site and this webmasterworld's forum post, with slight modifications. It works fine in all popular browsers.

CSS:

<style type="text/css" media="screen">
    .vcenter-wrapper {
        display: table;
        overflow: hidden;
    }

    .vcenter {
        display: table-cell;
        vertical-align: middle;
    }

    .vcenter p { padding: 0; margin: 0; } /** optional **/
</style>

<!--[if lt IE 8]>
<style type="text/css" media="screen">
    .vcenter-wrapper {
        position: relative;
    }

    .vcenter {
        position: absolute; top: 50%;
    }

    .vcenter p {
        position: relative; top: -50%;
    }
</style>
<![endif]-->

HTML:

<div class="vcenter-wrapper">
    <div class="vcenter">
        <p>
            Some long text<br/>
            with<br/>
            multiple<br/>
            lines
        </p>
    </div>
</div>

See an example.

Useful tools / links