CSS: Vertically center with display: table-cell

The classical scenario: There's a parent div element and you want to center some arbitrary child element vertically inside of it. Here's how you do it (also try this jsfiddle Show archive.org snapshot ).

The children need to be block elements.

The HTML

Copy<div class="parent">
  <div class="child"></div>
  <div class="child"></div>
  ...
</div>

The CSS

Copy.parent {
  display: table-cell;
  vertical-align: middle;
  width: 500px;
  height: 300px;
}
      
.child {}

When .child elements are inline elements, add display: block; to their style.
When you need to specify the width of .child elements, center them with margin: auto;.

This works in IE8+, Firefox 15.0+, Chrome 22.0+, Safari 5.1+ and Opera 12.0+.