Wie zentriert man Text vertikal in einem Div mit CSS?

Aufbau der HTML-Struktur

Erstellen Sie eine HTML-Struktur mit einem div-Container und Textinhalt:

<div class="container">
  <p>Dieser Text wird vertikal und horizontal zentriert.</p>
</div>

Diese Struktur bietet Ihnen eine Grundlage zum Arbeiten. Das äußere div ist Ihr Container, und der Absatz enthält den Text, den Sie zentrieren möchten.

Anwendung von Flexbox-Eigenschaften

Flexbox zentriert Inhalte vertikal und horizontal. Wenden Sie diese CSS-Eigenschaften an:

.container {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 200px; /* Höhe festlegen */
  border: 1px solid #ccc; /* Optional: für Sichtbarkeit */
}

Hier ist, was diese Eigenschaften bewirken:

• display: flex macht den Container zu einem Flex-Container.
• align-items: center zentriert Flex-Elemente vertikal.
• justify-content: center zentriert Flex-Elemente horizontal.
• Legen Sie eine height für den Container fest, um die vertikale Zentrierung zu sehen.

Diese Methode funktioniert für einzeiligen und mehrzeiligen Text. Sie passt sich verschiedenen Bildschirmgrößen an.

.container {
  /* Fallback für ältere Browser */
  display: table;
  width: 100%;
  height: 200px;
}

.container p {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}

/* Flexbox für moderne Browser */
@supports (display: flex) {
  .container {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .container p {
    display: block;
  }
}

Konfiguration des CSS

Die Line-Height-Technik zentriert einzeiligen Text vertikal in einem div. So richten Sie es ein:

.container {
  height: 100px;
  line-height: 100px;
  text-align: center;
  border: 1px solid #ccc;
}

In diesem CSS:

• Setzen Sie die height des div auf den gewünschten Wert (in diesem Beispiel 100px).
• Passen Sie die line-height an die Höhe des div an. Dies schiebt den Text in die Mitte.
• Fügen Sie text-align: center für die horizontale Zentrierung hinzu.

Die HTML-Struktur ist einfach:

<div class="container">
  Zentrierter Text
</div>

Diese Methode funktioniert, indem der Text die volle Höhe des Containers einnimmt und so in die Mitte geschoben wird.

.container {
  /* ... bestehende Stile ... */
  white-space: nowrap;
  overflow: hidden;
}

Einschränkungen der Line-Height-Methode

Diese Technik hat einige Einschränkungen:

• Sie funktioniert am besten für einzeiligen Text. Bei mehreren Zeilen kann der Text überlaufen oder abgeschnitten werden.
• Bei mehrzeiligem Inhalt kann diese Methode zu Abstandsproblemen führen. Jede Zeile versucht, die volle Höhe des Containers einzunehmen.
• Wenn der Text länger als die Breite des Containers ist, wird er umbrochen und die vertikale Ausrichtung wird gestört.

Aus diesen Gründen ist die Line-Height-Technik am nützlichsten, wenn Ihr Inhalt in einer Zeile bleibt und in die Breite des Containers passt.

Verwendung von CSS zur Erzeugung eines tabellenähnlichen Verhaltens

Die Methode der Tabellenanzeige verwendet CSS, um ein tabellenähnliches Verhalten zu erzeugen. Diese Methode zentriert Text vertikal in einem div:

.container {
  display: table;
  height: 200px;
  width: 100%;
}

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

Wenden Sie diese Stile auf Ihr HTML an:

<div class="container">
  <div class="content">
    Ihr Text kommt hier hin. Es kann eine einzelne oder mehrere Zeilen sein.
  </div>
</div>

Dieses CSS bewirkt Folgendes:

• display: table beim übergeordneten div erzeugt eine tabellenähnliche Struktur.
• display: table-cell beim untergeordneten Element lässt es sich wie eine Tabellenzelle verhalten.
• vertical-align: middle zentriert den Inhalt vertikal innerhalb der Zelle.

.container {
  height: 50vh; /* 50% der Viewport-Höhe */
}

Vorteile der Tabellenanzeige-Methode

Diese Methode hat mehrere Vorteile:

1. Sie funktioniert für ein- und mehrzeiligen Text. Der Inhalt passt sich dem Container an.

2. Sie hat eine gute Browserkompatibilität, einschließlich älterer Versionen des Internet Explorer.

3. Die Technik ist einfach umzusetzen und benötigt minimales CSS.

4. Sie behält den natürlichen Textfluss bei und vermeidet Probleme mit Zeilenumbrüchen oder Textüberlauf.

Legen Sie eine Höhe für das Container-div fest, um den vertikalen Zentrierungseffekt zu sehen. Passen Sie die Breite nach Bedarf für Ihr Layout an.

Einrichten des Grid-Containers

CSS Grid bietet eine einfache Möglichkeit, Text vertikal in einem div zu zentrieren. So richten Sie es ein:

.container {
  display: grid;
  place-items: center;
  height: 200px;
  border: 1px solid #ccc;
}

In diesem CSS:

• display: grid verwandelt den Container in ein Grid-Layout.
• place-items: center zentriert das Grid-Element vertikal und horizontal.

Die HTML-Struktur ist einfach:

<div class="container">
  <p>Dieser Text ist mit CSS Grid zentriert.</p>
</div>

Diese Methode zentriert den Inhalt unabhängig von seiner Länge oder Zeilenanzahl.

Vorteile von CSS Grid

CSS Grid hat mehrere Vorteile für die Zentrierung von Text:

1. Es benötigt nur wenige CSS-Eigenschaften, um die Zentrierung zu erreichen.

2. Es funktioniert gut mit verschiedenen Inhaltstypen, einschließlich mehrzeiligem Text, Bildern oder verschachtelten Elementen.

3. Grid-Layouts passen sich ohne zusätzliche Medienabfragen an verschiedene Bildschirmgrößen an.

4. Sie müssen keine zusätzlichen Wrapper-Elemente hinzufügen.

5. Grid ermöglicht die genaue Platzierung von Elementen innerhalb des Containers.

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

@supports (display: grid) {
  .container {
    display: grid;
    place-items: center;
  }
}

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: center;
  height: 200px;
  gap: 20px;
}

.item {
  text-align: center;
}

<div class="container">
  <div class="item">Element 1</div>
  <div class="item">Element 2</div>
  <div class="item">Element 3</div>
</div>

CSS Grid bietet eine saubere Lösung für die vertikale Zentrierung von Text in einem div und ist damit eine gute Wahl für die Webentwicklung.

Absolute Positionierungstechnik

Die absolute Positionierungstechnik zentriert Text vertikal mithilfe von CSS-Positionierungseigenschaften:

.container {
  position: relative;
  height: 200px;
  border: 1px solid #ccc;
}

.text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

HTML-Struktur:

<div class="container">
  <div class="text">Zentrierter Text</div>
</div>

Diese Methode funktioniert so:

• position: relative auf dem Container erzeugt einen Positionierungskontext.
• position: absolute auf dem Textelement nimmt es aus dem normalen Fluss heraus.
• top: 50% bewegt den Text zur Hälfte nach unten im Container.
• left: 50% bewegt den Text zur Hälfte über den Container.
• transform: translate(-50%, -50%) verschiebt den Text um die Hälfte seiner eigenen Breite und Höhe zurück.

.text {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

Padding-Methode zur Textzentrierung

Die Padding-Methode verwendet gleichmäßiges oberes und unteres Padding, um Text vertikal zu zentrieren:

.container {
  padding: 50px 0;
  text-align: center;
  border: 1px solid #ccc;
}

HTML-Struktur:

<div class="container">
  <p>Zentrierter Text mit Padding</p>
</div>

Diese Technik funktioniert, indem:

• Gleichmäßiges padding oben und unten zum Container hinzugefügt wird.
• text-align: center für horizontale Zentrierung verwendet wird.

Für responsives Design verwenden Sie Prozent- oder Viewport-Einheiten für das Padding:

.container {
  padding: 10% 0;
}

Dies ermöglicht es dem Padding, sich basierend auf der Breite des Containers anzupassen und den Zentrierungseffekt über verschiedene Bildschirmgrößen hinweg beizubehalten.

.container {
  padding: 50px 0;
  min-height: 200px;
}

Beide Methoden bieten Optionen für spezifische Layout-Anforderungen, wobei die absolute Positionierungstechnik präzise Kontrolle bietet und die Padding-Methode Einfachheit und Reaktionsfähigkeit bietet.