Bagaimana untuk Memusatkan Div secara menegak dalam CSS?

Memusatkan Div secara menegak dengan margin:auto

Semasa margin:O auto; melintang memusatkan div, margin:auto auto; tidak memusatkannya secara menegak. Malangnya, vertical-align:middle; juga tidak berfungsi untuk elemen peringkat blok seperti div.

Penghadan:

• vertical-align:middle;: Not terpakai kepada elemen peringkat blok.
• margin-top:auto dan margin-bottom:auto: Nilai yang dikira adalah sifar.
• margin-top:-50%;: Nilai margin berasaskan peratusan adalah berdasarkan lebar blok yang mengandungi.

Pemusatan Menegak Penyelesaian:

Disebabkan sifat aliran dokumen dan pengiraan ketinggian elemen, adalah mustahil untuk menggunakan jidar untuk pemusatan menegak dalam elemen induk. Penyelesaian ini, walau bagaimanapun, boleh menyelesaikan isu:

Pendekatan Elemen Bersarang:

Ini memerlukan tiga elemen bersarang seperti berikut:

.container {
  display: table;
  height: 100%;
  position: absolute;
  overflow: hidden;
  width: 100%;
}

.helper {
  display: table-cell;
  vertical-align: middle;
  position: absolute;
  top: 50%;
}

.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 Bagaimana untuk Memusatkan Div secara menegak dalam CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!