Vertical and Horizontal Align SASS mixin
/*
EX:
.container{
@include vertical-align(".container-content");
}
*/
@mixin vertical-align($content: null, $content-height: auto, $container-height: null) {
display: table;
@if $container-height != null {
height: $container-height;
}
#{$content} {
display: table-cell;
vertical-align: middle;
height: $content-height;
}
}
// directly from jeet.gs (https://github.com/mojotech/jeet)
// horizontal and vertical
// EX: @include align(vertical);
@mixin align($direction: both) {
position: absolute;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
transform-style: preserve-3d;
@if index("horizontal" "h", $direction) {
left: 50%;
-webkit-transform: translateX(-50%);
-moz-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
} @else if index("vertical" "v", $direction) {
top: 50%;
transform: translateY(-50%);
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
} @else if index("none", $direction) {
top: auto;
left: auto;
transform: translate(0, 0);
-webkit-transform: translate(0, 0);
-moz-transform: translate(0, 0);
-ms-transform: translate(0, 0);
} @else {
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
}
}