// Vertical alignment using flexbox (IE10+)
@mixin valignCenter() {
	display: flex;
	align-items: center;
	justify-content: center;

	// you might want to change this
	flex-flow: column nowrap; // or row
}

.u-valignCenter {
	@include valignCenter;
}

// Vertical alignment using transform (IE9+)
@mixin valignCenter--old {
	position: relative;
	top: 50%;
	transform: translateY(-50%);
}

.u-alignMiddle {
	@include valignCenter--old;
}