CSS tricks

Vertical align anything with just 3 lines of CSS

source http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/

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

It is a similar technique to the absolute-position method, but with the upside that we don’t have to set any height on the element or position-property on the parent. It works straight out of the box, even in IE9.

To make it even more simple, we can write it as a mixin with its vendor prefixes:

@mixin vertical-align {
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}
 
.element p {
  @include vertical-align;
}