Skip to content

Instantly share code, notes, and snippets.

@augbog
Forked from rbndelrio/snip.html
Created July 10, 2017 18:39
Show Gist options
  • Save augbog/7c5f064ee5c5b728ff5f96f5da4fb3cc to your computer and use it in GitHub Desktop.
Save augbog/7c5f064ee5c5b728ff5f96f5da4fb3cc to your computer and use it in GitHub Desktop.
Vertical aligning with Flexbox + IE9 table fallback
<div class="va">
<div class="va__body">
<div class="va__content">
<h1>Hello, World!</h1>
</div>
</div>
</div>
.va {
width: 100%;
height: 100%;
margin: 0 auto;
display: table;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center; }
@media screen and (min-width: 0\0) and (min-resolution: 0.001dpcm) {
.va > .va__body {
display: table-cell;
vertical-align: middle; } }
.va .va__body {width: 100%; }
.va .va__content {text-align: center; }
.va .va__content *:first-child {margin-top: 0; }
.va .va__content *:last-child {margin-bottom: 0; }
@mixin compat-ie-9 {
@media screen and (min-width:0\0) and (min-resolution:.001dpcm) {
& { @content; }
}
}
@mixin valign($child) {
display: table; //fallback
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
-webkit-align-items: center;
-webkit-box-align: center;
align-items: center;
@include compat-ie-9 {
& > #{$child} {
display: table-cell;
vertical-align: middle;
}
}
}
.va {
width:100%;
height:100%;
margin: 0 auto;
@include valign('.va__body');
.va__body {width:100%}
.va__content {
text-align:center;
*:first-child {
margin-top: 0;
}
*:last-child {
margin-bottom: 0;
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment