Vertical aligning with Flexbox + IE9 table fallback

index.html

<div class="va">
	<div class="va__body">
		<div class="va__content">
			<h1>Hello, World!</h1>
		</div>
	</div>
</div>

valign.css

.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; }

valign.scss

@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;
		}
	}
}