Wie zentriere ich Inhalte innerhalb einer Div vertikal?

Vertikale Ausrichtung von Inhalten innerhalb definierter Div-Abmessungen

Die vertikale Zentrierung von Inhalten innerhalb eines Divs mit einer bestimmten Breite und Höhe kann durch verschiedene Methoden erreicht werden . Lassen Sie uns einige beliebte Optionen erkunden:

1. Anzeige: Tabellenzelle für übergeordnetes Div

Das Festlegen der Anzeige des übergeordneten Divs auf Tabellenzelle und die Verwendung von „vertikal-align: middle“ auf dem untergeordneten Inhalt ermöglicht eine vertikale Zentrierung.

.parent-div {
  display: table-cell;
  vertical-align: middle;
}

2. Anzeige: Blockieren und Anzeige: Tabellenzelle

Wenn Sie die Anzeige des übergeordneten Divs auf „Blockieren“ und die Anzeige des untergeordneten Inhalts auf „Tabellenzelle“ einstellen, werden ähnliche Ergebnisse erzielt.

.parent-div {
  display: block;
  text-align: center;
}

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

3. Schwebendes übergeordnetes Div und Anzeige: Tabellenzelle

Das Schweben des übergeordneten Div und das Festlegen der Anzeige des untergeordneten Inhalts auf Tabellenzelle führt ebenfalls zu einer vertikalen Zentrierung.

.parent-div {
  float: left;
  text-align: center;
}

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

4. Position: Relativ und Position: Absolut

Durch Festlegen der Position des übergeordneten Divs auf relativ und der Position des untergeordneten Inhalts auf absolut, oben auf 50 % und Rand oben auf -50 % kann eine vertikale Zentrierung erfolgen erreicht. Diese Methode erfordert jedoch manuelle Anpassungen für unterschiedliche Höhenszenarien.

.parent-div {
  position: relative;
  height: 100px;
  width: 100px;
}

.child-content {
  position: absolute;
  top: 50%;
  margin-top: -50%;
  width: 100px;
}

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