“Use just 3 lines of CSS to vertically align content”

Using CSS3s ‘transform’ property we can simply and easily vertically align content. The transform property was designed to enable simple animations such as rotating and scaling elements, however we can manipulate content with transform:translateY.

To do this all we need to write is

.element {
  position: relative;
  transform: translateY(-50%);
  top: 50%;
}

This is all we need to do! And it works well in IE9.

Happy Coding!

Source: Sebastian Ekström