CSS vertical align center a div inside another div

Vertical align middle works by using display: table-cell on parent element and display: inline-block on the child.

<div class="parent">
	<div class="child">your content</div>
</div>

div.parent {
  display: table-cell;
  width: 500px;
  height: 500px;
  vertical-align: middle;
  text-align: center;
}

div.child {
  display: inline-block;
  width: 200px;
  height: 200px;
  text-align: left;
}

By Keenlio, February 27, 2014