Text mit CSS vertikal zentrieren
Texte unterschiedlicher Länge lassen sich u.a. mit Flexbox oder display:table; vertikal zentrieren.

Texte auf einer Website horizontal zu zentrieren sollte für die meisten Webdesigner kein Problem darstellen. Auch wie gefloatete und absolut positionierte Elemente horizontal zentriert werden können haben wir bereits in einem Beitrag erklärt. Eine vertikale Zentrierung von Texten kann da schon etwas komplizierter sein. In diesem Artikel erklären wir euch, wie ihr mit wenigen CSS-Angaben zum Ziel kommt und ansprechende gestalterische Ergebnisse erzielt. Insbesondere im Responsive Webdesign kann diese Technik von Vorteil sein.
Vertikale Zentrierung mit CSS und display:table;
Es gibt verschiedene Herangehensweisen bei der vertikalen Positionierung. Die klassische Lösung führt über die CSS-Eigenschaften zur Layoutsteuerung von Tabellen und verfügt über sehr guten Browser-Support. Es ist hier nicht von HTML-Tabellen die Rede, sondern von der display:table
-Eigenschaft von CSS. Die HTML-Semantik ist also in Ordnung.
Die Voraussetzungen im HTML-Code
Um Text in einem Element vertikal zentrieren zu können, muss euer Text-Element (im Beispiel eine <h2>
) das einzige direkte Kind-Element sein. Weitere Verschachtelungen innerhalb des Text-Elements sind möglich, aber euer Element darf keine weiteren Geschwister-Elemente besitzen. In folgendem Beispiel wollen wir die <h2>
vertikal zentriert im Container mit der Klasse .header
ausrichten.
<div class="header">
<h2>Überschrift</h2>
</div>
/* Überschrift mit weiterer Verschachtelung */
<div class="header">
<h2>Überschrift
<span>mit Untertitel</span>
</h2>
</div>
Die CSS-Angaben display: table;
und display: table-cell;
Nun müsst ihr dem umliegendem Element, also dem Element, an dem ihr später euren Text ausrichten wollt, die CSS-Angabe display: table;
geben. Das Element verhält sich jetzt genau so, wie eine Tabelle im HTML. Falls euer Element vorher ein Block-Element war und ihr die gleichen Breitenverhältnisse wieder herstellen wollt, müsst ihr im die Breite mit width: 100%;
manuell zuweisen. Zusätzlich solltet ihr dem Element eine Höhe geben, um später auch einen Effekt zu sehen. Die Angabe height
verhält sich durch eure vorherigen Angaben ähnlich der Angabe min-height
, die allerdings in diesem Beispiel nicht mehr greifen würde.
.header {
display: table;
width: 100%;
height: 10em;
}
Als nächstes gebt ihr dem Text-Element die Angabe display: table-cell;
, damit es sich so verhält wie eine Tabellen-Zelle in HTML. Eine Angabe der Breite eures Text-Elements ist nicht notwendig, da es sich standardmäßig an seinem Elternelement ausrichtet. Mit der Angabe vertical-align: middle;
könnt ihr nun den Text vertikal mittig an seinem Elternelement ausrichten.
h2 {
display: table-cell;
vertical-align: middle;
}
Mit dem CSS Flexbox-Modell vertikal zentrieren
Eine weitere Möglichkeit Inhalte vertikal in ihrem Elternelement zu zentrieren bietet das Flexbox-Modell von CSS. Hierbei erhält lediglich das Elternelement spezielle Angaben zur Positionierung. Mit der Angabe display:flex;
aktiviert ihr das Flexbox-Modell innerhalb des Eltern-Elements. Um den Text nun vertikal zu zentrieren benötigt ihr zusätzlich die Angabe align-items:center;
. Soll euer Text auch horizontal zentriert sein, erreicht ihr das mit justify-content:center;
.
Einen Einführungsartikel zu Flexbox haben wir hier veröffentlicht.
.header {
display: flex;
align-items: center;
justify-content: center;
}
Mit CSS Grid alle Header mit gleicher Höhe gestalten
Mit CSS Grid könnt ihr das Beispiel-Layout noch weiter optimieren. Einen detaillierten Beitrag dazu haben wir hier veröffentlicht und hier eine erweitere Lösung mit Sub-Grid vorgestellt.
Super! Vielen Dank. Danach habe ich ewig gesucht. Und im Netz erst bei Euch endlich fündig geworden.
DANKE !!!
Nach halbstündiger Suche im Netz ENDLICH auf Deiner Seite fündig geworden bezüglich der vertikalen Zentrierung in einem DIV-Bereich!
Lösung: display: table-cell; (!!!)
Dieser Zusatz ermöglicht erst: vertical-align: middle;
Besten Dank!
Hallo, das konnte ich soeben gut gebrauchen, danke ;-)
Schönes Ding!
Danke!
Folgendes geht für vertikales Zentrieren auch:
position: absolute;
top: 50%;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
Wow, 2015 und keine Flexbox-Lösung?
table-cell funktioniert und ist ja auch gut, aber Flexbox sollte doch wenigstens erwähnt werden… oder?
z.B. so:
https://philipwalton.github.io/solved-by-flexbox/demos/vertical-centering/
Hallo Chris, du hast vollkommen Recht. Wir haben den Beitrag um die Flexbox-Lösung ergänzt. Vielen Dank für deinen Kommentar!