Wenn du in CSS eine Überschrift zentrieren möchtest dann geht das relativ einfach. In diesem kurzen Beispiel zeige ich dir wie es geht.

So einfach geht’s: Überschriften mit CSS zentrieren!

Es gibt einige Möglichkeiten, Überschriften in HTML mithilfe von CSS zu zentrieren. In diesem Beitrag zeige ich dir zwei einfache Methoden

mit text-align kannst du in CSS einen Text sehr einfach zentrieren

CSS

h1 {
  text-align: center;
}

In diesem CSS-Selektor wählst du alle Überschriften vom Typ h1 aus.
Die Eigenschaft text-align: center; bewirkt, dass der Text in allen ausgewählten Überschriften horizontal zentriert wird.

HTML

<h1>Zentrierte Überschrift</h1>

Ergebnis:

Zentrierte Überschrift

Die Flexbox-Layout-Module bietet mehr Flexibilität beim Positionieren von Elementen. Es ist aber auch nicht schwer!!

CSS

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

Die Eigenschaft display: flex; schaltet die Flexbox-Layout-Module für die Überschrift ein.
justify-content: center; bewirkt, dass der Text horizontal zentriert wird.
align-items: center; bewirkt, dass der Text vertikal zentriert wird.

Flexbox bietet mehr Kontrolle über die Ausrichtung und Positionierung von Elementen.
Sie ist zukunftssicher und wird von modernen Browsern vollumfänglich unterstützt.

Die Syntax ist etwas komplexer als die Verwendung von text-align.
Ältere Browser erfordern möglicherweise zusätzliche Präfixe für die Flexbox-Eigenschaften.