Wie kann ich ein Div mithilfe von CSS vertikal zentrieren?

Vertikales Ausrichten eines Divs mit Margin:Auto

Wenn es um die horizontale Zentrierung eines Divs geht, ist die häufig verwendete Technik margin:0 auto . Bei der vertikalen Ausrichtung funktioniert die automatische Syntax „margin:auto“ jedoch nicht wie erwartet.

Warum Vertical-Align:Middle nicht funktioniert

Eine weitere mögliche Lösung: Vertical-Align: Middle schlägt fehl, da es nur auf Elemente auf Inline-Ebene anwendbar ist, nicht auf Elemente auf Blockebene wie z divs.

Einschränkungen des Randes für die vertikale Ausrichtung

Die vertikale Verwendung von margin: auto führt zu Problemen:

• Margin-top: auto und margin-bottom: Automatisches Ergebnis in null verwendeten Werten.
• Margin-top: -50 % berechnet relativ zu die Breite des enthaltenden Blocks, nicht seine Höhe.

Problemumgehung für die vertikale Ausrichtung

Während die Unfähigkeit, Divs mithilfe von Rändern vertikal auszurichten, frustrierend sein kann sind Workarounds. Ein beliebter Ansatz besteht darin, drei Elemente zu verschachteln:

.container {
  display: table;
  height: 100%;
  position: absolute;
  overflow: hidden;
  width: 100%;
}
.helper {
  position: absolute;
  top: 50%;
  display: table-cell;
  vertical-align: middle;
}
.content {
  position: relative;
  top: -50%;
  margin: 0 auto;
  width: 200px;
  border: 1px solid orange;
}

<div class="container">
  <div class="helper">
    <div class="content">
      <p>stuff</p>
    </div>
  </div>
</div>

Diese Technik zentriert das Div effektiv vertikal innerhalb seines übergeordneten Containers.

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