It’s not often that I miss tables but when I have to center something vertically I definitely find myself getting wistful for good ole VALIGN.

There are lots of different ways of handling vertical centering, depending on what’s being centered. The method for centering a single line of text is, by far, the simplest.

The rule: To center a single line of text vertically within an element, set the line-height of the text to the element’s height.

Here’s the HTML:

<div id="valign-demo">
    <p>centered text</p>
</div>

And the CSS:

<style>
#valign-demo {
    height: 100px;
    background: #ffc;
    text-align: center;
    border: 1px solid #c90;
}
#valign-demo p {
    font-weight: bold;
    line-height: 100px;
}
</style>

And here’s the demo:

That’s it! Bear in mind this technique only works for a single line of text.