Center text with vertical-align and text-align

by robdodson

HTML

<div id="container">
    <p>Hello World!</p>
    <p>Hello World!</p>
    <div id="module">
        <div id="module-content">
            <p>Foobar</p>
            <p>Foobar</p>
        </div>
    </div>
</div>

CSS

p {
    text-align: center;
}

#container {
    display: table-cell;
    vertical-align: middle;
    width: 300px;
    height: 300px;
    background: #0F0
}

#module {
    position: relative;
    width: 150px;
    height: 100px;
    background: #F00;
    margin: 0 auto;
}

#module-content {
    position: absolute;    
    width: 45px;
    height: 36px;
    top: 50%;
    left: 50%;
    margin-top: -18px;
    margin-left: -22.5px;
}