Vertical align with CSS / including Sass mixin

gistfile1.css

/* Vertical align
 * Use this mixin or placeholder to vertical align elements
 * @corinneroosen
*/

// Mixin
@mixin vertical-align {
  position: relative; // Sometimes you need to try "absolute" here
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

.parent .element {
  @include vertical-align;
}

// Placeholder
%vertical-align {
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

.parent .element {
  @extend %vertical-align;
}

/* CSS for the parent element
 * In order to prevent blur and other strange behaviour
 * set a preserve-3d to the parent
*/

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

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