Bagaimana untuk Memusatkan Div secara Menegak dalam Div Induknya?

Memusatkan Div Secara Menegak dalam Div Induk

Memusatkan div secara menegak dalam div induknya boleh dicapai melalui pelbagai kaedah, tanpa bergantung pada dimensi elemen tertentu.

Reka Letak Meja (Klasik Pendekatan)

Kaedah ini menggunakan reka letak jadual dan sifat paparan blok sebaris.

<div class="container">
  <div class="inner">
    ...
  </div>
</div>

.container {
  display: table-cell;
  vertical-align: middle;
  height: 500px;
  width: 500px;
}

.inner {
  display: inline-block;
  width: 200px;
  height: 200px;
}

Transform (Pendekatan Moden)

Transformasi menawarkan penyelesaian yang lebih mudah untuk menegak pemusatan.

.container {
  position: relative;
  height: 500px;
  width: 500px;
}

.inner {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 200px;
  height: 200px;
}

Flexbox (Pendekatan Moden Pilihan)

Flexbox menyediakan kaedah paling mudah untuk penjajaran berpusat.

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 500px;
  width: 500px;
}

.inner {
  width: 200px;
  height: 200px;
}

Nota:

• Susun atur meja pendekatan disokong dengan baik tetapi boleh memberi kesan kepada prestasi.
• Transform dan flexbox menawarkan penyelesaian moden dengan sokongan yang lebih besar dan kemudahan penggunaan.
• Kaedah ini memastikan pemusatan menegak tanpa mengira dimensi atau kandungan bahagian dalam div.

Atas ialah kandungan terperinci Bagaimana untuk Memusatkan Div secara Menegak dalam Div Induknya?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!