Bagaimanakah Saya Boleh Memusatkan Elemen Secara Menegak dalam CSS?

Memusatkan Elemen Menegak Menggunakan Teknik CSS

Memusatkan elemen secara menegak dalam div boleh dicapai menggunakan pelbagai kaedah CSS. Berikut ialah dua pendekatan biasa:

Kaedah Flexbox

Flexbox menyediakan sistem susun atur serba boleh yang membolehkan penjajaran item yang fleksibel. Untuk memusatkan elemen secara menegak menggunakan Flexbox, ikuti langkah berikut:

1. Tetapkan bekas induk supaya mempunyai paparan fleksibel menggunakan paparan: flex.
2. Tentukan arah lentur lajur untuk menyusun elemen secara menegak.
3. Jajarkan item secara menegak menggunakan justify-content: tengah.

Sebagai contoh, berikut ialah coretan CSS menggunakan Flexbox:

#container {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

Kaedah Jadual dan Kedudukan

Kaedah ini menggunakan paparan jadual dan kedudukan:

1. Tetapkan badan kepada paparan: jadual untuk mewujudkan struktur seperti jadual.
2. Tetapkan bekas induk untuk dipaparkan: sel jadual dan jajar menegak: tengah ke selaraskan kandungan secara menegak.
3. Pusat elemen menggunakan margin: 0 auto.

Ini kod CSS untuk kaedah ini:

body {
  display: table;
}

#container {
  display: table-cell;
  vertical-align: middle;
}

.box {
  margin: 0 auto;
}

Kaedah Yang Mana Perlu Dipilih?

Flexbox secara amnya diutamakan kerana kesederhanaan, kecekapan dan pelbagai pilihan reka letaknya . Walau bagaimanapun, jika sokongan untuk penyemak imbas lama menjadi kebimbangan, kaedah jadual dan kedudukan boleh diguna pakai.

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