kulturbanause Blog

Responsive Design, WordPress, Konzeption, HTML, CSS, JS & UX/UI …

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.

Workshops und Seminare von kulturbanause

Visual Prototyping, Responsive Design, CSS Grid & Flexbox, Sketch, Adobe XD …

Jetzt Frühbucher-Rabatte sichern!

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;. Falls ihr mit dem Flexbox-Modell arbeiten wollt, überprüft vorher bei caniuse.com ob alle, für euer Projekt relevanten Browser, dieses Modell bereits verstehen. Einen Einführungsartikel zu Flexbox haben wir hier veröffentlicht.

.header {
  display: flex;
  align-items: center;
  justify-content: center;
}

Beispiel anschauen

Mit CSS Grid und display:contents; Header gleich höhe gestalten

Mit einer Kombination aus CSS Grid und display:contents; könnt ihr das Layout noch weiter optimieren. Einen detaillierten Beitrag dazu haben wir hier veröffentlicht.

Nützliche Hilfsmittel

Natürlich gibt es auch Online-Tools, die euch dabei helfen können Texte und Elemente vertikal und horizontal zu zentrieren. Einige dieser nützlichen Tools findet ihr auf best-web-design-tools.com. Tools zum Thema Flexbox findet ihr hier.

Jetzt bist du gefragt!

Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freuen wir uns auf deinen Kommentar.

Du kannst diesen Beitrag natürlich auch weiterempfehlen. Wir sind dir für jede Unterstützung dankbar!

Das könnte dich auch interessieren

6 Kommentare

  1. Chris

    Verfasst am 2. November 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/

    • Jonas Hellwig

      Verfasst am 3. November 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!

  2. Sven

    Verfasst am 9. November 2015 um 8: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%);

  3. Jonas Hellwach

    Verfasst am 20. Januar 2016 um 17:08 Uhr.

    Schönes Ding!
    Danke!

  4. Manuel Schmöllerl

    Verfasst am 8. Juni 2016 um 16:33 Uhr.

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

  5. Ralph

    Verfasst am 21. Mai 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!

Kommentar verfassen

Dieser Blog lebt vom Feedback der Besucher! Also los, mach mit!
Bitte habe Verständnis dafür, dass Kommentare die mit dem Inhalt dieses Beitrags nichts zu tun haben, gelöscht werden.