Wie kann ich ein Div innerhalb eines anderen Div vertikal zentrieren?

Ein Div innerhalb eines anderen Div vertikal zentrieren

Wenn Sie ein Div innerhalb eines anderen Div zentrieren möchten, besteht Ihr erster Ansatz möglicherweise darin, die Werte „margin-top“ und „margin-left“ zu verwenden , wie im CSS-Beispiel unten zu sehen:

#outerDiv {
    width: 500px;
    height: 500px;
    position: relative;
}

#innerDiv {
    width: 284px;
    height: 290px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -147px;
    margin-left: -144px;
}

Diese Methode erfordert jedoch Anpassungen, wenn sich die Größe des inneren Div ändert. Für eine allgemeinere Lösung können wir die folgenden Optionen erkunden:

Vertical Align Middle

Mit Vertical-align: middle wird das Div im übergeordneten Container vertikal ausgerichtet. Um diese Technik zu verwenden:

1. Stellen Sie den übergeordneten Container auf die Anzeige ein: table-cell und richten Sie ihn vertikal mit Vertical-Align: Middle aus.
2. Stellen Sie das innere Div auf die Anzeige ein: inline- Block.

Moderne Lösungen:

1. Transformieren

Transformationen bieten einen einfacheren Ansatz:

1. Platzieren Sie das innere Div absolut positioniert mit oben: 50 % und links: 50 %.
2. Anwenden von a transform: Translate(-50%,-50%), um das Div in beiden zu zentrieren Abmessungen.

2. Flexbox

Flexbox bietet mit seiner Flexibilität die müheloseste Lösung:

1. Stellen Sie den übergeordneten Container so ein, dass er angezeigt wird: flex.
2. Verwenden Sie justify-content : center und align-items: center, um das innere Div sowohl horizontal als auch vertikal zu zentrieren.

Das Spezifische Die von Ihnen gewählte Methode hängt von Ihren Kompatibilitätsanforderungen und Vorlieben ab.

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