Mengapa Tidak `margin: auto auto;` Menegak Pusat Div?

Menjajarkan Div secara menegak dengan margin:auto

Sementara jidar: 0 auto; boleh memusatkan div secara mendatar, margin: auto auto; tidak menyelaraskannya secara menegak seperti yang dimaksudkan. Selain itu, jajaran menegak: tengah; tidak berkesan untuk elemen peringkat blok.

Mengapa Margin Auto Menegak Gagal

• margin-atas: auto dan margin-bottom: auto kira kepada sifar, tidak memberikan kesan pemusatan.
• margin atas: -50% mengira nilainya berbanding dengan lebar blok yang mengandungi, bukan ketinggiannya.

Penyelesaian Menggunakan Elemen Bersarang

Satu penyelesaian yang berdaya maju melibatkan tiga elemen bersarang:

.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>

Dalam hal ini penyelesaian:

• Elemen .bekas luar membentuk struktur seperti jadual.
• Elemen .helper meletakkan kandungan pada titik tengah menegak.
• Kandungan . div diletakkan dalam .helper dan boleh dipusatkan secara mendatar dengan margin: 0 auto;.

Atas ialah kandungan terperinci Mengapa Tidak `margin: auto auto;` Menegak Pusat Div?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!