Vertikale Ausrichtung von Inhalten innerhalb bestimmter Div-Abmessungen

Die vertikale Ausrichtung von Inhalten innerhalb eines Divs mit definierter Höhe und Breite ist eine häufige Anforderung in der Webentwicklung . Um diese Ausrichtung zu erreichen, ziehen Sie die folgenden Methoden in Betracht:

1. Übergeordnetes Div als Tabellenzelle:

• Setzen Sie die Anzeige des übergeordneten Divs auf Tabellenzelle und richten Sie es vertikal in der Mitte aus.
• Diese Lösung richtet den Inhalt in Browsern vertikal aus Unterstützung display:table-cell.

2. Übergeordnetes Div mit Blockanzeige und Inhalt als Tabellenzelle:

• Behalten Sie das übergeordnete Div als Blockelement bei, aber stellen Sie die Anzeige des Inhalts auf Tabellenzelle ein.
• Dies Die Methode basiert auf der Fähigkeit des übergeordneten Divs, eine Tabellenzelle aufzunehmen.

3. Übergeordnetes Div-Floating und Inhalts-Div als Tabellenzelle:

• Lassen Sie das übergeordnete Div schweben und stellen Sie die Anzeige des Inhalts-Divs auf Tabellenzelle ein.
• Dieser Ansatz erreicht eine Ausrichtung ohne Änderungen Die Anzeigeeigenschaft des übergeordneten Div.

4. Übergeordnetes Div mit relativer Position und Inhalt mit absoluter Position:

• Positionieren Sie das übergeordnete Div relativ und legen Sie das Inhalts-Div absolut fest.
• Zentrieren Sie den Inhalt vertikal, indem Sie oben:50 festlegen % und margin-top:-50 % auf den Inhalt div.
• Diese Methode bietet eine präzise, ​​aber manuelle Ausrichtung für bestimmte Szenarien.