Center anything vertically using translateY().

translateY-center-vertical.sass

/* Vertically center whatever we want, 
 * even if we don’t know its height.
 */

.element {
	position: relative;
	top: 50%;
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: perspective(1px) translateY(-50%);
}


/* Set preserve-3d on parent element
 * if you can't use transform: perspective
 * and the centered element is blurry.
 */

.parent-element {
	-webkit-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
	transform-style: preserve-3d;
}


/* Mixin */

@mixin center-vertical( $position: relative ) {
	position: $position;
	top: 50%;
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
}

.element p {
	@include center-vertical();
}