Wie zentriere ich Inhalte innerhalb eines Divs mit definierten Abmessungen vertikal?

Inhalte vertikal innerhalb eines Divs mit definierten Abmessungen zentrieren

Wenn Sie mit einem Div mit vordefinierter Breite und Höhe arbeiten, kann es sein, dass der Inhalt vertikal ausgerichtet wird eine gemeinsame Herausforderung. Man benötigt eine Methode, die Inhalte unterschiedlicher Höhe effektiv zentriert.

Lösungen:

1. Übergeordnetes Div als Tabellenzelle:

Stellen Sie die Anzeige des übergeordneten Divs auf Tabellenzelle ein. Dadurch entfällt die Notwendigkeit einer Tabellenzelle für den Inhalt selbst:

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

2. Übergeordnetes Div als Block, Inhalts-Div als Tabellenzelle:

Stellen Sie die Anzeige des übergeordneten Divs auf Block und die Anzeige des Inhalts-Divs auf Tabellenzelle ein:

.area {
  display: block;
}

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

3. Übergeordnetes Div schwebend, Inhalts-Div als Tabellenzelle:

Stellen Sie das übergeordnete Div auf schwebend und das Inhalts-Div als Tabellenzelle ein. Dies erfordert eine sorgfältige Berücksichtigung der Margen:

.area {
  float: left;
}

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

4. Übergeordnetes Div relativ positioniert, Inhalts-Div absolut positioniert:

Setzen Sie die Position des übergeordneten Divs auf relativ und die Position des Inhalts-Divs auf absolut. Bestimmen Sie die Inhaltshöhe und stellen Sie den oberen Rand auf die Hälfte der Inhaltshöhe ein. Diese Lösung erfordert eine manuelle Anpassung für jeden Fall:

.area {
  position: relative;
}

.content {
  position: absolute;
  top: 50%;
  height: 50%;
  margin-top: -25%;
}

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