Mengapakah `margin-left: auto` dan `margin-right: auto` Tidak Memusatkan Elemen dengan `kedudukan: mutlak`?

Memusatkan Elemen dengan CSS: Kedudukan Mutlak lwn. Kedudukan Relatif

Apabila cuba memusatkan elemen menggunakan CSS, anda mungkin menghadapi masalah di mana margin-kiri: auto dan margin-kanan: auto kelihatan tidak berkesan dengan kedudukan: mutlak. Walau bagaimanapun, jidar ini berfungsi apabila kedudukan: relatif digunakan.

Perbezaan ini berpunca daripada cara kedudukan itu: mutlak mengalih keluar elemen daripada aliran dokumen biasa dan meletakkannya mengikut koordinat yang disediakan. Dalam konteks ini, menetapkan margin kepada auto tidak mempunyai kesan kerana tiada unsur "ibu bapa" untuk mengira margin berbanding.

Sebaliknya, position: relative mengekalkan kedudukan elemen dalam aliran biasa halaman . Oleh itu, jidar-kiri: auto dan jidar-kanan: auto boleh digunakan untuk memusatkan elemen berbanding dengan elemen yang mengandunginya.

Untuk memusatkan elemen secara mendatar menggunakan kedudukan mutlak, anda boleh menetapkan lebar elemen, letakkan ia ke tepi kiri dan kanan bekas induknya menggunakan kiri dan kanan, dan tetapkan kedudukan atas dan bawah untuk memusatkan elemen secara menegak.

Atas ialah kandungan terperinci Mengapakah `margin-left: auto` dan `margin-right: auto` Tidak Memusatkan Elemen dengan `kedudukan: mutlak`?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!