Einen Text innerhalb eines Elements horizontal und vertikal zu zentrieren ist nicht immer ganz einfach; besonders wenn das Element eine vorgegebene Größe hat.

Der Klassiker ist natürlich dieser:

.box {
	padding: 5px;
}

Durch den Innenabstand ist der Text zentriert, da der Abstand zu den Rändern jeweils 5 Pixel beträgt. Das klappt natürlich nur, wenn man in der Wahl der Größe des Elements nicht beschränkt ist.

Wenn wir nun aber Text in einem Element mit vorgegebener Größe zentrieren wollen, wird es schon schwieriger.

Angenommen wir haben folgendes Element

.box {
	width: 200px;
	height: 100px;
	padding: 42px 20px;
	background: #fff;
	font-size: 16px;
}

sieht das mit Textinhalt im Browser so aus:

Text ist nicht zentriert

Den Text horizontal zu zentrieren ist recht simpel. Dafür reicht uns ein text-align: center;:

.box {
	width: 200px;
	height: 100px;
	padding: 42px 20px;
	background: #fff;
	font-size: 16px;
	text-align: center;
}

Nun kommt die Herausforderung: wie können wir den Text vertikal zentrieren?

Was läge da näher, als es mit vertical-align: middle; zu versuchen. Hört sich doch gut an, oder? Das wird aber fehlschlagen, da sich vertical-align lediglich auf die vertikale Ausrichtung innerhalb einer Textzeile bezieht und nicht auf das übergeordnete Element.

Angenommen wir haben einen statischen Text, der nur eine Zeile des Elements beansprucht, fallen mir zwei Möglichkeiten ein:

Wir nutzen line-height (Zeilenhöhe) und geben dieser den gleichen Wert, wie die Höhe des Elements.

.box {
	width: 200px;
	height: 100px;
	padding: 42px 20px;
	background: #fff;
	font-size: 16px;
	text-align: center;
	line-height: 100px;
}

Text zentriert mittels line-height

Da der Text innerhalb der Zeile zentriert wird, ist er damit auch im Element mittig ausgerichtet. Wie gesagt, dass klappt nur, wenn der Text in eine Zeile passt.

Eine weitere Möglichkeit besteht darin den Innenabstand (padding) nach oben und unten so aufzuteilen, dass der Text mittig ausgerichtet ist.

Das Element hat eine Höhe von 100 Pixeln, der (einzeilige) Text eine Höhe von 16 Pixeln. Wenn wir nun jeweils 42 Pixel als Abstand nach oben und unten definieren, sind wir bei insgesamt 100 Pixeln. Richtig? Richtig!

.box {
	width: 200px;
	height: 100px;
	padding: 42px 20px;
	background: #fff;
	font-size: 16px;
	text-align: center;
}

Oh oh, stop mal: nach dem Box-Modell vergrößert ein definierter Innenabstand (padding) das Element. Wir hätten also beim obigen Beispiel ein Element von insgesamt 240 (200 Pixel Breite + je 20 Pixel links und rechts) x 184 (100 Pixel Höhe + je 42 Pixel oben und unten) Pixeln. Unser errechneter Innenabstand würde dann also nicht passen.

Wir können das Box-Modell aber „umgehen“, indem wir ein box-sizing hinzufügen:

.box {
	width: 200px;
	height: 100px;
	padding: 42px 20px;
	background: #fff;
	font-size: 16px;
	text-align: center;
	box-sizing: border-box;
}

So spielt der Innenabstand bei der Größe des Elements keine Rolle mehr und unsere Rechnung von oben passt.

Text zentriert mittels padding

Was, wenn der Text mehrzeilig ist? Auch dann funktioniert diese Möglichkeit:

Angenommen wir haben zwei Zeilen mit einer Zeilenhöhe von 20 Pixeln (bei einer Schriftgröße von 16 Pixeln also jeweils 2 Pixel Abstand nach oben und unten), dann müssen wir eine Höhe von 40 Pixeln für den Text berechnen. Den Innenabstand müssen wir also auf jeweils 30 Pixel festsetzen:

.box {
	width: 200px;
	height: 100px;
	padding: 30px 20px;
	background: #fff;
	font-size: 16px;
	line-height: 20px;
	text-align: center;
	box-sizing: border-box;
}

und bekommen so einen mehrzeiligen zentrierten Text:

Zweizeiliger Text zentriert

Abschließend noch ein Beispiel für zentrierten Text in einem runden Element mittels Zeilenhöhe:

.box {
	width: 50px;
	height: 50px;
	background: #fff;
	font-size: 16px;
	text-align: center;
	line-height: 50px;
	box-sizing: border-box;
	border-radius: 50px;
}

Das schaut dann so aus:

Zentrierter Text in rundem Element