Vertically align anything with only 3 lines of CSS (Sass mixin included)

vertically-align.scss

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


/* 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();
}