How to vertically center arbitrary contents using flexbox with backwards compatibility for IE10, Safari 5.1, Android < 4.4, etc.

vertical-centering.css

.vertical-center {
    display: -moz-box;
    -moz-box-align: center;
    display: -webkit-box;
    -webkit-box-align: center;
    display: -ms-flexbox;
    -ms-flex-align: center;
    display: -webkit-flex;
    -webkit-align-items: center;
    display: flex;
    align-items: center;
}

vertical-centering.scss

@mixin vertically-centered-contents {
    // See http://caniuse.com/#feat=flexbox
    // 2009 Working Draft: Safari 5.1, Android 4.3 and lower, etc
    @include flexbox((
        display: box,
        box-align: center,
    ), $version: 1);

    // March 2012 Working Draft: IE10
    @include flexbox((
        display: flexbox,
        flex-align: center,
    ), $version: 2);

    // Final standard: IE11, Firefox, Chrome, Safari 6+
    @include flexbox((
        display: flex,
        align-items: center
    ));
}

.vertical-center {
    @include vertically-centered-contents();
}