Vertical center centering with a table

vertical_centering.txt

But if you’re using a table for this purpose (and not to display tabular-data), instead you should use another type of element (div, for example), and set its display property to table to mimick a the table behavior.


<style>
    .vertical-outer {
        display: table;
        height: 10em
    }

    .vertical-inner {
        display: table-cell;
        vertical-align: middle
    }
</style>

<div class="vertical-outer">
    <div class="vertical-inner">
        <p>I’m so centered it’s not even funny.</p>
    </div>
</div>