A quick & simple mixin that takes one arguement (relative vs absolute) and vertically aligns an element within its parent.

SCSS mixin: vertically align

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