Vertical align anything with just 3 lines of CSS

vertical-align.scss

// Source: http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/

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

.element p {
    @include vertical-align;
}

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

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