Vertical centering with inline block and line heights, as explained by Jamy Golden at http://css-plus.com/2013/01/inline-block-the-complete-story/

vertical centering css

.container {
  height: 500px; /* Some kind of height is necessary here. */
  line-height: 500px; /* This value should equal the height */
  text-align: center; /* This horizontally centers the element */
  background-color: #66D9EF;
}

.centered {
  display: inline-block;
  *display: inline; zoom: 1; /* IE7 inline-block hack */
  line-height: normal; /* If left out, the line-height of .block will be inherited - by the parent (500px) in this case */
  vertical-align: middle; /* This vertically centers inline-level elements */
  background-color: #FFF;
  padding: 40px 80px;
  font-family: arial, sans;
  color: #66D9EF;
}

.ie7-ibvc-fix { display: inline; zoom: 1; } /* Inline sibling required for vertical-align to take affect in IE7 */

vertical centering html

<div class="container">
  <div class="centered">
    <h1>I'm vertically centered!</h1>
  </div>
  <!--[if lt IE 8]><div class="ie7-ibvc-fix"></div><![endif]--> 
</div>