Bolehkah saya Memusatkan DIV Secara Menegak Menggunakan `margin: auto`?

Menjajarkan DIV secara menegak dengan jidar: auto

Soalan:

Adakah mungkin untuk memusatkan DIV secara menegak menggunakan margin :auto auto;? Mengapa tidak vertical-align:middle; kerja?

Jawapan:

Mengenai Margin:

Malangnya, margin:auto auto; tidak mencapai pemusatan menegak. Margin tidak boleh digunakan pada elemen peringkat blok seperti DIV untuk penjajaran menegak. Akibatnya, margin:top:auto dan margin-bottom:auto tidak berkesan.

Mengenai vertical-align:middle;:

vertical-align:middle; hanya terpakai pada elemen sebaris, bukan elemen peringkat blok seperti DIV.

Penyelesaian:

Memandangkan tidak mungkin untuk memusatkan DIV secara menegak menggunakan margin, penyelesaian penyelesaian adalah disyorkan. Satu pendekatan yang berfungsi dengan baik ialah menggunakan elemen bersarang dalam bekas seperti jadual:

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

Atas ialah kandungan terperinci Bolehkah saya Memusatkan DIV Secara Menegak Menggunakan `margin: auto`?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!