Wie kann ich Elemente in CSS vertikal zentrieren?

Elemente mithilfe von CSS-Techniken vertikal zentrieren

Elemente vertikal innerhalb eines Divs zentrieren, kann mithilfe verschiedener CSS-Methoden erreicht werden. Hier sind zwei gängige Ansätze:

Flexbox-Methode

Flexbox bietet ein vielseitiges Layoutsystem, das eine flexible Ausrichtung von Artikeln ermöglicht. Um Elemente mithilfe von Flexbox vertikal zu zentrieren, führen Sie die folgenden Schritte aus:

1. Stellen Sie den übergeordneten Container mithilfe von display: flex so ein, dass er eine Flex-Anzeige hat.
2. Geben Sie eine Flex-Richtung der Spalte zum Stapeln von Elementen an vertikal.
3. Elemente mithilfe von justify-content: center vertikal ausrichten.

Hier ist zum Beispiel ein CSS Snippet mit Flexbox:

#container {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

Tabellen- und Positionierungsmethode

Diese Methode nutzt die Tabellenanzeige und Positionierung:

1. Set den Körper in eine display:-Tabelle, um die tabellenartige Struktur festzulegen.
2. Legen Sie den übergeordneten Container so fest, dass Folgendes angezeigt wird: table-cell und Vertical-align: middle, um den Inhalt vertikal auszurichten.
3. Zentrieren Sie die Elemente mit margin: 0 auto.

Hier ist der CSS-Code für diese Methode:

body {
  display: table;
}

#container {
  display: table-cell;
  vertical-align: middle;
}

.box {
  margin: 0 auto;
}

Welche Methode soll ich wählen?

Flexbox ist Aufgrund seiner Einfachheit, Effizienz und großen Auswahl an Layoutoptionen wird es im Allgemeinen bevorzugt. Wenn jedoch die Unterstützung älterer Browser ein Problem darstellt, kann die Tabellen- und Positionierungsmethode übernommen werden.

Das obige ist der detaillierte Inhalt vonWie kann ich Elemente in CSS vertikal zentrieren?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!