Mengapakah `margin: auto` Tidak Memusatkan Elemen Berkedudukan Benar atau Tetap?

Mengapa Margin:auto Sahaja Tidak Akan Memusatkan Elemen Diposisikan

Apabila cuba memusatkan elemen div dalam bekas induk menggunakan kedudukan: mutlak atau kedudukan: sifat tetap, menggunakan margin: auto sahaja mungkin tidak mencukupi.

Memahami Spesifikasi CSS

Mengikut spesifikasi CSS, untuk elemen dengan kedudukan: relatif atau kedudukan: statik (aliran normal), menetapkan kedua-dua margin-kiri dan margin-kanan ke auto mendatar memusatkan elemen berbanding blok yang mengandunginya, kerana nilai yang digunakan menjadi sama. Walau bagaimanapun, ini tidak terpakai kepada elemen dengan kedudukan: mutlak atau kedudukan: tetap.

Untuk elemen kedudukan mutlak atau tetap, di mana ketiga-tiga kiri, lebar dan kanan adalah automatik, nilai margin-kiri yang digunakan dan margin-kanan ditetapkan kepada 0 untuk mengelakkan pemusatan. Untuk memusatkan elemen sedemikian, seseorang mesti menentukan nilai untuk kiri, kanan atau lebar.

Kesan Penetapan kiri, kanan dan lebar

Jika kiri, kanan, dan lebar semuanya ditakrifkan, margin mendapat nilai yang sama, menghasilkan pemusatan. Meninggalkan mana-mana nilai ini akan menyebabkan elemen menyimpang daripada penjajaran tengah.

Demonstrasi dengan Kes Berbeza

Jadual berikut menunjukkan pelbagai kes, seperti yang diterangkan dalam CSS spesifikasi:

Margin Setting	Centring
margin-left: auto; margin-right: auto	Yes (flow element)
margin-left: auto; margin-right: auto	No (absolute/fixed element)
left: auto; right: auto; width: auto	No (margin set to 0)
left: 0; right: 0; width: auto	No (margin set to 0)
right: auto; left: auto;	No (margin set to 0)
left: auto; right: auto; width: 200px	Yes (equal margins)
left: 0; width: auto	Yes (equal margins)
right: 0; width: auto	Yes (equal margins)

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