Vertical alignment of elements

To use vertical-align: middle you need to wrap the element in question around 2 additional divs. First div needs display: table, second – display: table-cell and you also need to now the fixed height of the ‘table’. Now, thanks to Z63 we have an easier css solution with less html.

.element {
	position: relative;
	top: 50%;

	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
}

The following is needed on the parent element to prevent blurry effect from using translateY.

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

Original article – Vertical align anything with just 3 lines of CSS

Leave a Reply

Your email address will not be published. Required fields are marked *