Text mit CSS 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;
}

Beispiel anschauen

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;
}

Beispiel anschauen

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.

Geschrieben von:

Jonas Hellwig

Benutzerbild

Jonas ist Gründer der Agentur kulturbanause und des kulturbanause Blogs. Er arbeitet an der Schnittstelle zwischen UX/UI Design, Frontend und Redaktion und hat zahlreiche Fachbücher und Video-Trainings veröffentlicht. Jonas Hellwig ist regelmäßig als Sprecher auf Fachveranstaltungen anzutreffen und unterstützt mit Seminaren und Workshops Agenturen und Unternehmen bei der Planung, der Gestaltung und der technischen Umsetzung von Web-Projekten.

Jonas Hellwig bei Xing

Feedback & Ergänzungen – 7 Kommentare

  1. Anja
    schrieb am 01.08.2019 um 11:06 Uhr:

    Super! Vielen Dank. Danach habe ich ewig gesucht. Und im Netz erst bei Euch endlich fündig geworden.

    Antworten
  2. Ralph
    schrieb am 21.05.2018 um 16:19 Uhr:

    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!

    Antworten
  3. Manuel Schmöllerl
    schrieb am 08.06.2016 um 16:33 Uhr:

    Hallo, das konnte ich soeben gut gebrauchen, danke ;-)

    Antworten
  4. Jonas Hellwach
    schrieb am 20.01.2016 um 17:08 Uhr:

    Schönes Ding!
    Danke!

    Antworten
  5. Sven
    schrieb am 09.11.2015 um 08:55 Uhr:

    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%);

    Antworten
  6. Chris
    schrieb am 02.11.2015 um 17:45 Uhr:

    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/

    Antworten
    • Jonas Hellwig
      schrieb am 03.11.2015 um 10:24 Uhr:

      Hallo Chris, du hast vollkommen Recht. Wir haben den Beitrag um die Flexbox-Lösung ergänzt. Vielen Dank für deinen Kommentar!

      Antworten

Kommentar zu dieser Seite

Wir freuen uns über Anregungen, Ergänzungen oder Hinweise zu Fehlern. Wir lesen jeden Eintrag, veröffentlichen aber nur, was den Inhalt sinnvoll ergänzt.

Projekte mit kulturbanause

Wir wissen wovon wir reden. Wir realisieren komplette Projekte oder unterstützen punktuell in den Bereichen Design, Development, Strategy und Content.

Design + Code

Schulungen von kulturbanause

Wir bieten Seminare und Workshops zu den Themen Konzept, Design und Development. Immer up-to-date, praxisnah, kurzweilig und mit dem notwendigen Blick über den Tellerrand.

Schulung + Beratung