waynedunkley
10/20/2015 - 11:31 PM

Vertical align content

Vertical align content

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

.parent {
  -webkit-transform-style: preserve-3d; //Prevent bluring when .element falls on a half pixel
  -moz-transform-style: preserve-3d;
  transform-style: preserve-3d;
}

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