Vertical align anything with just 3 lines of CSS

With just 3 lines of CSS (excluding vendor prefixes) we can with the help of transform: translateY  vertically center whatever we want, even if we don’t know its height.

The CSS property transform is usally used for rotating and scaling elements, but with its translateY function we can now vertically align elements. Usually this must be done with absolute positioning or setting line-heights, but these require you to either know the height of the element or only works on single-line text etc.

So, to vertically align anything we write:

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

That’s all you need. 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 Internet Explorer 9. To ensure browser compability, remember to add the proper vendor prefixes. At the time of writing, you need -ms-transform and -webkit-transform to make sure it works everywhere.

To make it even more simple, we can write it as a mixin:

/* Mixin */
@mixin vertical-align($position: relative) {
  position: $position;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

.element p {
  @include vertical-align();
}

As a few people have pointed out, this method can cause elements to be blurry due to the element being placed on a “half pixel”. A solution for this is to either set its parent element to preserve-3d. Like following:

.parent-element {
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  transform-style: preserve-3d;
}

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

Or, you can set the perspective of the element:

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