Bagaimana untuk Memusatkan Bekas secara Menegak dalam Bootstrap: Flexbox lwn. Pseudo-Element?

Cara Menegak Memusatkan Bekas dalam Bootstrap

Menggunakan Susun Atur Kotak Fleksibel (Kaedah Moden)

Untuk pelayar moden, anda boleh memusatkan bekas secara menegak menggunakan kotak fleksibel susun atur:

<div class="jumbotron vertical-center">
  <div class="container">
    ...
  </div>
</div>

.vertical-center {
  min-height: 100vh;
  display: flex;
  align-items: center;
}

Menggunakan ::before Pseudo-Element (Kaedah Warisan)

Untuk pelayar lama, anda boleh menggunakan ::before pseudo- elemen untuk mencipta elemen ketinggian penuh yang akan menjajarkan bekas secara menegak:

<div class="jumbotron vertical-center">
  <div class="container">
    ...
  </div>
</div>

.vertical-center {
  height: 100%;
  width: 100%;
  text-align: center;
  font: 0/0 a;
}

.vertical-center:before {
  content: " ";
  display: inline-block;
  vertical-align: middle;
  height: 100%;
}

.vertical-center > .container {
  max-width: 100%;
  display: inline-block;
  vertical-align: middle;
  font: 16px/1 "Helvetica Neue", Helvetica, Arial, sans-serif;
}

Pertimbangan Tambahan

• Untuk mengelakkan isu yang tidak dijangka pada skrin kecil, anda boleh menetapkan semula ketinggian ::sebelum pseudo -elemen kepada auto atau 0.
• Jika terdapat bahagian pengaki/pengepala di sekeliling bekas, letakkannya dengan betul dan tambah nilai indeks-z yang lebih tinggi untuk mengekalkannya di atas.

Atas ialah kandungan terperinci Bagaimana untuk Memusatkan Bekas secara Menegak dalam Bootstrap: Flexbox lwn. Pseudo-Element?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!