Wie kann man ein Div innerhalb seines übergeordneten Divs vertikal zentrieren?

Ein Div vertikal innerhalb eines übergeordneten Div zentrieren

Das vertikale Zentrieren eines Div innerhalb seines übergeordneten Div kann durch verschiedene Methoden erreicht werden, ohne sich darauf verlassen zu müssen spezifische Elementabmessungen.

Tabellenlayout (klassisch Ansatz)

Diese Methode nutzt Tabellenlayout und Inline-Block-Anzeigeeigenschaften.

<div class="container">
  <div class="inner">
    ...
  </div>
</div>

.container {
  display: table-cell;
  vertical-align: middle;
  height: 500px;
  width: 500px;
}

.inner {
  display: inline-block;
  width: 200px;
  height: 200px;
}

Transformation (moderner Ansatz)

Transformationen bieten eine einfachere Lösung für die Vertikale Zentrierung.

.container {
  position: relative;
  height: 500px;
  width: 500px;
}

.inner {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 200px;
  height: 200px;
}

Flexbox (Preferred Modern Approach)

Flexbox bietet die einfachste Methode zur zentrierten Ausrichtung.

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 500px;
  width: 500px;
}

.inner {
  width: 200px;
  height: 200px;
}

Hinweis:

• Der Tabellenlayout-Ansatz wird gut unterstützt, kann jedoch sein Schlagleistung.
• Transform und Flexbox bieten moderne Lösungen mit mehr Unterstützung und Benutzerfreundlichkeit.
• Diese Methoden gewährleisten eine vertikale Zentrierung unabhängig von den Abmessungen oder dem Inhalt des inneren Teils.

Das obige ist der detaillierte Inhalt vonWie kann man ein Div innerhalb seines übergeordneten Divs vertikal zentrieren?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!