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 ).

Rails Long Term Support

Rails LTS provides security patches for old versions of Ruby on Rails (2.3, 3.2, 4.2 and 5.2)

• Prevents you from data breaches and liability risks
• Upgrade at your own pace
• Works with modern Rubies

Read more Show archive.org snapshot

The children need to be block elements.

The HTML

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

The CSS

.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+.