Tujuh cara terpantas untuk memusatkan div anda menggunakan CSS

Panduan CSS ini meneroka tujuh kaedah yang cekap untuk div berpusat secara mendatar dan menegak, mengkaji kelebihan dan kekurangan setiap pendekatan. Jom terjun!

Kaedah 1: Flexbox

Kaedah paling mudah memanfaatkan flexbox. Sapukan display: flex, justify-content: center (pemusatan mendatar) dan align-items: center (pemusatan menegak) pada bekas induk.

<code class="language-css">.flex-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #f0f0f0;
}
.box {
  background-color: #4caf50;
  color: white;
  padding: 20px;
  font-size: 20px;
}</code>

Flexbox cemerlang dalam kebolehsuaiannya; spesifikasi lebar dan ketinggian tidak wajib. Ia amat cekap untuk memusatkan berbilang elemen dalam satu bekas.

Kaedah 2: margin: auto

Teknik biasa ini menggunakan margin: auto. Walau bagaimanapun, ia mempunyai had:

• Memerlukan lebar yang ditentukan untuk elemen.
• Elemen mesti mempunyai paparan blok atau jadual dan tidak boleh mempunyai position: fixed atau position: absolute.
• Penjajaran menegak tidak disokong.

<code class="language-css">.box {
  width: 200px;
  height: 100px;
  margin: auto;
  background-color: #2196f3;
  color: white;
  text-align: center;
  line-height: 100px;
}</code>

Oleh itu, kebolehgunaannya adalah khusus senario.

Kaedah 3: Paparan Blok Sebaris

Kaedah ini menggabungkan text-align: center pada induk dan display: inline-block pada div anak. Ini menjadikan div kanak-kanak berkelakuan seperti elemen sebaris, membolehkan pemusatan mendatar melalui penjajaran teks ibu bapa.

<code class="language-css">.container {
  text-align: center;
  height: 100vh;
  background-color: #f0f0f0;
}
.box {
  display: inline-block;
  background-color: #ff9800;
  color: white;
  padding: 20px;
  font-size: 20px;
}</code>

Tidak seperti margin: auto, lebar yang ditentukan tidak diperlukan, tetapi pemusatan menegak tetap tidak disokong.

Kaedah 4: Transformasi 2D

Menggunakan transformasi 2D menyediakan penyelesaian yang mantap. Tetapkan position elemen kepada absolute, kemudian top: 50% dan left: 50%. Akhir sekali, gunakan transform: translate(-50%, -50%) untuk mengimbangi berdasarkan dimensi elemen.

<code class="language-css">.container {
  position: relative;
  height: 100vh;
  background-color: #f0f0f0;
}
.box {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #e91e63;
  color: white;
  padding: 20px;
  font-size: 20px;
}</code>

Kaedah ini memastikan div berpusat tanpa mengira elemen lain, sesuai untuk tindanan. Walau bagaimanapun, takrifan lebar dan ketinggian diperlukan.

Kaedah 5: Reka Letak Grid

Grid CSS menawarkan pendekatan yang sangat cekap:

• Tetapkan bekas induk kepada display: grid.
• Gunakan place-items: center untuk pemusatan mendatar dan menegak.

<code class="language-css">.parent {
  display: grid;
  place-items: center;
}</code>

Kebaikan: Tiada spesifikasi lebar/tinggi diperlukan; berkesan untuk pelbagai elemen. Keburukan: Memerlukan sokongan penyemak imbas moden (walaupun disokong secara meluas).

Kaedah 6: Paparan Jadual

Kaedah lama ini menggunakan display: table pada ibu bapa dan display: table-cell dan vertical-align: middle pada anak. text-align: center mengendalikan penjajaran mendatar.

<code class="language-css">.parent {
  display: table;
  width: 100%;
  height: 100%;
}
.child {
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}</code>

Kaedah 7: Transformasi Relatif Kedudukan

Variasi Kaedah 4, ini menggunakan position: relative pada ibu bapa dan position: absolute dengan top: 50%, left: 50% dan translate(-50%, -50%) pada anak.

<code class="language-css">.flex-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #f0f0f0;
}
.box {
  background-color: #4caf50;
  color: white;
  padding: 20px;
  font-size: 20px;
}</code>

Ini menawarkan lebih kawalan apabila menangani elemen bersarang.

Kesimpulan

Panduan ini memberikan gambaran menyeluruh tentang teknik pemusatan div. Kaedah optimum bergantung pada konteks khusus dan tahap kawalan yang dikehendaki. Pilih dengan bijak! Pertimbangkan untuk menyambung di LinkedIn, Bluesky dan Medium untuk mendapatkan lebih banyak kandungan.

Atas ialah kandungan terperinci Tujuh cara terpantas untuk memusatkan div anda menggunakan CSS. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!