In diesem Tutorial zeige ich, wie ein Element horizontal oder vertikal (oder beides) zentriert wird. Das soll unser Ergebnis sein:

Element mittig ausgerichtet

Angenommen wir haben ein Element

<div class="box">Blablablub</div>

wie folgt definiert

.box {
	width: 200px;
	height: 200px;
	padding: 20px;
	background: #fff;
	box-sizing: border-box;
}

dann schaut das im Browser etwa so aus:

Element nicht zentriert

Anmerkung: das box-sizing habe ich eingefügt, damit padding (Innenabstand) das Element nicht vergrößert. Ohne box-sizing hätten wir ansonsten ein Element mit einer realen Größe von 240 x 240 Pixeln.

Um das Element zentrieren zu können, müssen wir es zunächst absolut positionieren. Das gibt uns die Möglichkeit Startpositionen festzulegen. Wir tun dies mit einem top– und einem left-Wert zu jeweils 50%:

.box {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 200px;
	height: 200px;
	padding: 20px;
	background: #fff;
	box-sizing: border-box;
}

Damit erhalten wir dann das Ergebnis:

Element bei 50% zentriert

Aber Moment mal, das ist ja gar nicht zentriert…

Korrekt, wir haben die Größe (200 x 200 Pixel) des Elements auch noch nicht berücksichtigt. Der Startpunkt des Elements (obere linke Ecke) beginnt genau in der Mitte. Um nun das gesamte Element mittig auszurichten, müssen wir es jeweils um die Hälfte der Breite und Höhe nach links oben verschieben. Logisch, oder?

Das machen wir per margin (Außenabstand) mit einem negativen Wert, welcher der Hälfte der Breite (für das Verschieben nach links) sowie der Hälfte der Höhe (für das Verschieben nach oben) des Elements entspricht:

.box {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 200px;
	height: 200px;
	padding: 20px;
	margin-left: -100px;
	margin-top: -100px;
	background: #fff;
	box-sizing: border-box;
}

So bekommen wir das Element wie gewollt mittig ausgerichtet:

Horizontal und vertikal zentriertes Element

Ziel erreicht.