/** * Vertical alignement for page * Inspired by http://css-tricks.com/snippets/css/center-div-with-dynamic-height/ * * Usage: * * SCSS * @include vertical-align-requirement; * .v-align-container { @include vertical-align-container } * .v-align-content-container { @include vertical-align-content-container } * .v-align-content { @include vertical-align-content } * * HTML * *

* Your content ! *

* * * @thanks Chris Coyier @chriscoyier * @autor Maxime Thirouin maxime.thirouin@gmail.com @MoOx */ @mixin vertical-align-requirement { html, body { height:100%; margin: 0; padding: 0; } } @mixin vertical-align-container { display: table; overflow: hidden; margin-left: auto; margin-right: auto; height: 100%; // ie6 ie7 *position:relative; } @mixin vertical-align-content-container { display: table-cell; vertical-align: middle; // ie6 ie7 *position: absolute; *top: 50%; } @mixin vertical-align-content { // ie6 ie7 *position: relative; *top: -50%; }