Vertically centering one line of text can be achieved using one of 2 methods outlined in this article.

To vertically center a number of lines of text using CSS will (unfortunately) not work with the methods outlined in the above mentioned article. To vertically center more than one line of text (with no restriction as the how many lines of text you want to center), use the method outlined below.

Please note that this method currently does NOT work with Internet Explorer. This is because this browser is not able to render “display: table” and “display: table-cell”.

<div style="display: table; width: 25em; height: 25em; position: relative; border:1px solid #CECECE">
<div style="position: relative; top: 50%; display: table-cell; vertical-align: middle">
<div style=" position: relative; top: -50%; border:1px solid #00ff00">
Display any text of any height<br />
or any content, and<br />
everything will be<br />
vertically centered.<br />
</div>
</div>
</div>

We’re still trying to find a solution for vertically aligning more than one line of text that will work in IE and is flexible enough to accomodate varying number of lines. Any and all suggestions are welcome!