Element mit CSS horizontal und vertikal zentrieren

HTML Texte oder Elemente mit CSS horizontal und vertikal zentrieren.
Untenstehend sind hierfür 2 Möglichkeiten aufgelistet.

Achtung

Diese Methoden für das vertikale und horizontale Zentrieren funktionieren nur, wenn nur ein direktes Kind-Element dem Eltern-Element unterstellt ist.
Es darf keine weiteren Geschwister-Elemente enthalten.

display: flex

Der grosse Vorteil beim "display: flex"-Modell liegt darin, dass hier nur dem Eltern-Element die Anweisung mitgegeben werden muss.

vertikal und horizontal zentrierte Text

HTML Code

<div class="eltern-element">
  <div class="kind-element">
    vertikal und horizontal zentrierte Text
  </div>
</div>

CSS Code

.eltern-element {
  display: flex;
  align-items: center; /* Vertikale Zentrierung */
  justify-content: center; /* Horizontale Zentrierung */
  height: 150px; /* Beispiel Höhe*/
  background-color:#CCC; /* Beispiel Hintergrundfarbe*/
}

.kind-element {
}

Vorsicht

Das "display: flex"-Modell wird von älteren Browsern nicht unterstützt.

Mehrere Elemente nebeneinander zentrieren

Selbstverständlich können auch mehrere Elemente nebeneinander zentriert werden.
Dies eignet sich auch für den Aufbau und das Grundgerüst von modernen responsive Website.

Text

HTML Code

CSS Code

display: table

Der Vorteil beim "display: table"-Modell liegt beim guten Support von älteren Browsern.
Als kleiner Nachteil muss die Eigenschaft dem Eltern- und dem Kind-Element mitgegeben werden.
Dieses Modell ist nicht mit den alt bekannten und meist gehassten Tabellen zu verwechseln.

vertikal und horizontal zentrierte Text

HTML Code

<div class="eltern-element">
  <div class="kind-element">
    vertikal und horizontal zentrierte Text
  </div>
</div>

CSS Code

.eltern-element {
display: table;
width: 100%; /* bei Block-Element */
height: 150px; /* Beispiel Höhe*/
background-color:#CCC; /* Beispiel Hintergrundfarbe*/
}

.kind-element {
display: table-cell;
vertical-align: middle;
text-align: center;
}

letztes Update 16. August 2018

Kommentare

Hier können sowohl Fragen wie auch ein Feedback zum oben stehenden Artikel eingetragen werden.

Hinweis:
Der Eintrag wird nach einer redaktionellen Prüfung in den kommenden Tagen freigeschalten.

Top Themen

Suche

DoubleTwist

iTunes mit Android Handy synchronisieren

Free YouTube Video Music

gratis Musik für Youtube Videos

Spenden

ROG Innovation unterstützen