CSS / SCSS Snippets

vertical-align-center.scss

/*
 * Vertical alignment center
 * SRC: http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/
 * Works in IE9
 */
 
// As a mixin
@mixin vertical-align {
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

.element {
  @include vertical-align;
}

// As a placeholder selector
%vertical-align {
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

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

// Half-pixel bug fix
.parent-element {
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  transform-style: preserve-3d;
}