CSS: Center Text Vertically

CSS level 2 does not have a property for centering things vertically. There will probably be one in CSS level 3. However, you can center block vertically in CSS2 by combining a few properties. The trick is to specify the outer block as a table cell, because table cell contents can be centered vertically.

Note: Not all e-reader devices may display these CSS properties.

The following example centers a paragraph inside a block with a certain height.

Here is an example:

CSS

div.container { 
   min-height: 10em; 
   display: table-cell; 
   vertical-align: middle;
}

HTML

<div class="container"> 
<p>This small paragraph... 
</div>