Warum zentriert „margin: auto auto;' ein Div nicht vertikal?

Vertikales Ausrichten eines Div mit margin:auto

While margin: 0 auto; kann ein Div horizontal zentrieren, Rand: auto auto; richtet es nicht wie vorgesehen vertikal aus. Zusätzlich vertikal ausrichten: Mitte; ist für Elemente auf Blockebene unwirksam.

Warum vertikale automatische Ränder fehlschlagen

• margin-top: auto und margin-bottom: auto Auf Null berechnen, ohne Zentrierungseffekt.
• margin-top: -50 % berechnet seinen Wert relativ zur Breite des enthaltenden Blocks, nicht zu seiner Höhe.

Problemumgehung mit verschachtelten Elementen

Eine praktikable Problemumgehung besteht darin, drei Elemente zu verschachteln:

.container {
    display: table;
    height: 100%;
    position: absolute;
    overflow: hidden;
    width: 100%;
}
.helper {
    position: absolute;
    top: 50%;
    display: table-cell;
    vertical-align: middle;
}
.content {
    position: relative;
    top: -50%;
    margin: 0 auto;
    width: 200px;
    border: 1px solid orange;
}

<div class="container">
    <div class="helper">
        <div class="content">
            <p>stuff</p>
        </div>
    </div>
</div>

In dieser Lösung:

• Das Äußere Das .container-Element erstellt eine tabellenartige Struktur.
• Das .helper-Element platziert den Inhalt in der vertikalen Mitte.
• Das .content-Div wird innerhalb von .helper positioniert und kann mit einem Rand horizontal zentriert werden : 0 automatisch;.

Das obige ist der detaillierte Inhalt vonWarum zentriert „margin: auto auto;' ein Div nicht vertikal?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!