Wie zentriere ich ein Div in CSS vertikal?

Vertikales Zentrieren eines Div mit margin:auto

While margin:O auto; zentriert ein Div horizontal, margin:auto auto; zentriert es nicht vertikal. Leider ist Vertical-Align:Middle; Funktioniert auch nicht für Elemente auf Blockebene wie Divs.

Einschränkungen:

• vertical-align:middle;: Nicht anwendbar auf Elemente auf Blockebene.
• margin-top:auto und margin-bottom:auto: Berechnete Werte sind Null.
• margin-top:-50%;: Prozentbasierte Randwerte basieren auf der Breite des enthaltenden Blocks.

Problemumgehungen für die vertikale Zentrierung:

Aufgrund von Aufgrund der Art des Dokumentenflusses und der Berechnung der Elementhöhe ist es unmöglich, Ränder zur vertikalen Zentrierung innerhalb eines übergeordneten Elements zu verwenden. Diese Problemumgehungen können das Problem jedoch lösen:

Ansatz mit verschachtelten Elementen:

Dies erfordert die Verschachtelung von drei Elementen wie folgt:

.container {
  display: table;
  height: 100%;
  position: absolute;
  overflow: hidden;
  width: 100%;
}

.helper {
  display: table-cell;
  vertical-align: middle;
  position: absolute;
  top: 50%;
}

.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>

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