Verticaal centreren met CSS

Het verticaal centreren van HTML elementen kan af en toe voor problemen zorgen. Gelukkig zijn er vandaag de dag genoeg goede manieren om elementen verticaal te centreren. Ook methodes waarbij dynamische content geen probleem is. In deze blog wil ik graag een 4-tal oplossingen met jullie delen die ik vaak in de praktijk gebruik.

Voor alle voorbeelden in deze blog gebruik ik dezelfde HTML.

<div class="parent-element">
	<div class="element">
		Verticaal gecentreerde content.
	</div>
</div>

Line height

De line-height CSS eigenschap wordt veel gebruikt voor verticaal centreren. Dit is een vrij eenvoudige oplossing waarbij je de line-height van het child element dezelfde waarde geeft als de hoogte van het parent element. Het nadeel van deze methode is dat het alleen werkt voor een woord of zin met een enkele regel. In de praktijk is deze oplossing dus slechts voor een aantal toepassingen bruikbaar. Deze oplossing werkt voor alle browsers.

.parent-element {
	height: 200px;
}

.element {
	line-height: 200px;
}

Absolute positionering

Een ander veel gebruikte methode is de absolute positionering in combinatie met een negatieve margin. Het element wat je wilt centreren moet hierbij een vaste hoogte hebben. Omdat dit element een vaste hoogte moet hebben is deze methode dus niet geschikt voor het inladen van dynamische content. Deze methode werkt net als de vorige oplossing in alle browsers.

.parent-element {
	position: relative;
}

.element {
	height: 40px;

	margin-top: -20px;

	position: absolute;
	top: 50%;
	bottom: 50%;
}

Table align

Vertical-align is een CSS eigenschap waarmee je elementen verticaal kan centreren. Deze eigenschap werkt echter alleen voor tabellen en niet voor standaard block elementen. Door de block elementen te wijzigen naar table en table-cell elementen kunnen we echter wel gebruik maken van de vertical-align eigenschap. Het parent element geven we hierbij de waarde ’table’ en de child elementen krijgen de waarde ’table-cell’. Deze oplossing werkt in bijna alle browsers. Alleen de oude versies van Internet Explorer geven problemen.

.parent-element {
	display: table;

	width: 100%;
}

.element {
	display: table-cell;

	vertical-align: middle;
}

Translate

Translate is een CSS eigenschap waarmee je HTML elementen kan draaien en/of schalen. Deze techniek wordt echter ook steeds vaker gebruikt om elementen te centreren. In de basis werkt het hetzelfde als de absolute positionering oplossing met als voordeel dat het element hier geen vaste hoogte hoeft te hebben. Translate geeft de mogelijkheid om een element te verplaatsen. In dit geval verplaatsen we het element met 50% van het te centreren element. Deze oplossing werkt in alle meest recente browsers.

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

 	transform: translateY(-50%);
}