CSS to vertically align text to middle of div

Question

What is the correct way to force text in a div to vertically align to the middle? I have found a couple \'tricks\', but I need something that works with a single line and multip

Answer 1

I've made a quick example for you, using display: table-cell property on the parent div.

CSS:
    .outer {
    width: 500px;
    height: 500px;
    display: table-cell;
    background-color: red;
    vertical-align: middle;
}

.inner {
    display: block;
    width: 300px;
    height: 200px;
    margin: 0px auto;
    background-color: yellow;
}

HTML:

http://jsfiddle.net/aKT42/