Mengapa 'margin: auto' Tidak Memusatkan Elemen Berkedudukan Sepenuhnya atau Tetap?

Memusatkan Elemen Kedudukan: Melangkaui 'margin: auto'

Dalam CSS, memusatkan elemen menggunakan margin: sifat auto boleh menjadi rumit apabila berurusan dengan elemen yang diletakkan secara mutlak atau tetap. Untuk memahami tingkah laku ini, kita perlu menyelidiki spesifikasi CSS.

Pemusatan Elemen Dalam Aliran

Untuk elemen aliran masuk (tanpa kedudukan mutlak atau tetap), menetapkan kedua-dua jidar-kiri dan jidar-kanan kepada automatik mencapai pemusatan mendatar berbanding dengan blok yang mengandungi. Ini berfungsi kerana spesifikasi CSS menentukan bahawa jika kedua-dua jidar ditetapkan kepada auto, ia mestilah sama, menyebabkan elemen dipusatkan.

Pemusatan Elemen Mutlak dan Tetap

Namun, apabila menyentuh unsur mutlak atau tetap, keadaannya berbeza. Spesifikasi CSS menyatakan bahawa:

• Jika ketiga-tiga kiri, lebar dan kanan adalah automatik, nilai margin-kiri dan margin-kanan ditetapkan kepada 0, menghalang pemusatan automatik.
• Jika kiri, lebar atau kanan bukan automatik, dua sifat yang lain mempunyai nilai autonya ditetapkan kepada 0 dan baki selebihnya dikira sama. Ini mengakibatkan pemusatan.
• Jika tiada satu pun daripada tiga sifat itu automatik, jidar kiri dan jidar kanan sekali lagi ditetapkan kepada 0 dan peraturan khusus digunakan untuk melaraskan kedudukan elemen.

Menetapkan Kiri dan Kanan kepada Sifar

Untuk memusatkan elemen mutlak atau tetap menggunakan margin: auto, anda juga mesti menetapkan kiri dan kanan kepada 0. Ini memaksa penyemak imbas untuk mengira jidar-kiri dan jidar-kanan secara sama rata, menghasilkan pemusatan mendatar.

Walau bagaimanapun, jika anda menentukan sebarang nilai lain untuk kiri atau kanan, pemusatan tidak akan berlaku melainkan anda juga menetapkan lebar. Mengabaikan salah satu sifat ini akan menghasilkan elemen tidak berpusat.

Contoh Dunia Sebenar

Pertimbangkan kod berikut:

.box {
  height: 50px;
  border: 1px solid;
  position: relative;
}

.box > div {
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
  width: 200px;
  background-color: red;
  color: #fff;
}

Dalam contoh ini, tetapan kiri: 0 dan kanan: 0 memastikan bahawa div sentiasa siram dengan tepi kiri dan kanan kotak. Jidar: sifat auto kemudian memusatkan div secara mendatar dalam kotak.

Atas ialah kandungan terperinci Mengapa 'margin: auto' Tidak Memusatkan Elemen Berkedudukan Sepenuhnya atau Tetap?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!