Zur Suche springen Zur Navigation springen Zum Hauptinhalt springen Zum Footer springen

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 kulturbanause Team

Benutzerbild

Beiträge bei denen das kulturbanause-Team als Autor angegeben ist, wurden von mehreren Personen in Zusammenarbeit geschrieben. Wir nutzen diesen Blog als öffentliches Archiv und um euch bei alltäglichen Problemen im Zusammenhang mit der Erstellung von Websites zu helfen. Neben diesem Blog bieten wir auch Trainings wie Schulungen, Bücher oder Videos an. Und natürlich unterstützen wir auch gerne im Rahmen unserer Agenturtätigkeit.

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.

Website-Projekte mit kulturbanause

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

Übersicht Kompetenzen →

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.

Übersicht Schulungsthemen →