Sometimes things that look easy can be surprisingly hard to accomplish in CSS. One of these things is the vertical centering of a simple text block. On the first glance it is not painfully obvious how one would go about this but once you stop trying to be clever it is really rather easy.

The below example will center a paragraph of text vertically using nothing but HTML and CSS. And the best part? This is cross browser compatible back to Internet Explorer 7! Enjoy!

The HTML with a simple text paragraph:

p>This is the text that should be located at the vertical center!</p>

The CSS to make it appear in the vertical center:

html, body {
   height: 100%;
   width: 100%;
   margin: 0;
   padding: 0;
}
 
body {
   display: table;
}
 
p {
   display: table-cell;
   vertical-align: middle;
   text-align: center;
}

See it in action in this fiddle.

Photo by Michael Coghlan