Question

If I am in a table cell in a apply the CSS rule vertical-align: middle; to that cell then all the text centers vertically in the cell.

<table>
    <tr>
        <td style="vertical-align: middle;">
            I am vertically centered text!
        </td>
    </tr>
</table>

However, if I apply this to another element it functions differently or not at all. For example:

<div style="width: 300px; height: 400px; vertical-align: middle;">
    I am not vertically centered, but I wish I was :(
</div>

But then if I apply it to an image tag then it adjusts how the image is oriented with other inline elements.

Here is a jsfiddle with examples of all these scenarios.

My question is, how can I accomplish vertical center alignment within a simple DIV just like the way it behaves in a table cell?

Answer 1

Add display: table-cell to your div.

jsFiddle: http://jsfiddle.net/7FYBa/20/

<div class="outer" style="position:absolute;">
    <div class="inner" style="display:table-cell; vertical-align:middle;">
        I am not vertically centered, but I wish I was :(
    </div>
</div>