Bagaimanakah Saya Boleh Memusatkan Div Secara Menegak Menggunakan CSS?

Menjajarkan Div Secara Menegak Menggunakan Margin:Auto

Apabila ia datang untuk memusatkan div secara mendatar, teknik yang biasa digunakan ialah jidar: 0 auto . Walau bagaimanapun, untuk penjajaran menegak, margin:auto sintaks auto tidak berfungsi seperti yang diharapkan.

Mengapa Menjajarkan Menegak:Tengah Tidak Berfungsi

Satu lagi penyelesaian yang berpotensi, penjajaran menegak: tengah, gagal kerana ia hanya terpakai pada elemen peringkat sebaris, bukan elemen peringkat blok seperti divs.

Penghadan Margin untuk Penjajaran Menegak

Menggunakan margin: auto secara menegak membawa kepada isu:

• Margin-atas: auto dan margin-bawah: auto menghasilkan sifar nilai yang digunakan.
• Margin-atas: -50% mengira berbanding lebar blok yang mengandungi, bukan ketinggiannya.

Penyelesaian untuk Penjajaran Menegak

Walaupun ketidakupayaan untuk menjajarkan div secara menegak menggunakan jidar boleh mengecewakan , terdapat penyelesaian. Satu pendekatan popular 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>

Teknik ini berkesan memusatkan div secara menegak dalam bekas induknya.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Memusatkan Div Secara Menegak Menggunakan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!