Mengapa Margin Auto Tidak Berfungsi dengan Kedudukan Mutlak dalam CSS?

Konflik Kedudukan Mutlak CSS dengan Margin Auto

Dalam CSS, sifat kedudukan mutlak mengalih keluar elemen daripada aliran biasa dokumen dan ia diletakkan berdasarkan sifat atas, kiri, kanan dan bawah. Walau bagaimanapun, apabila sifat margin-kiri dan margin-kanan ditetapkan kepada auto dengan kedudukan mutlak, ia tidak mempunyai sebarang kesan.

Ini kerana margin-kiri: auto dan margin-kanan: sifat auto cuba memusatkan elemen dalam blok yang mengandunginya. Untuk elemen dengan kedudukan mutlak, blok yang mengandunginya ialah badan dokumen. Walau bagaimanapun, badan dokumen itu sendiri tidak mempunyai lebar yang ditetapkan, jadi penyemak imbas tidak dapat menentukan di mana elemen harus dipusatkan.

Sebaliknya, apabila sifat kedudukan ditetapkan kepada relatif, elemen itu dialih keluar daripada aliran biasa, tetapi kotak khayalannya kekal dalam aliran dokumen. Dalam kes ini, apabila jidar-kiri dan jidar-kanan ditetapkan kepada auto, jidar akan dikira berdasarkan lebar blok yang mengandungi, yang bagi elemen yang agak kedudukannya masih merupakan badan dokumen. Walau bagaimanapun, memandangkan badan dokumen mempunyai lebar yang ditetapkan, penyemak imbas boleh menentukan dengan betul di mana elemen harus dipusatkan.

Untuk memusatkan elemen dengan kedudukan mutlak:

Sebaliknya menggunakan margin-left: auto dan margin-right: auto, anda boleh menetapkan sifat kiri dan kanan kepada 50%. Ini akan memusatkan elemen dalam badan dokumen. Anda juga perlu menentukan sifat atas dan bawah untuk menghalang elemen daripada bergerak dari skrin.

Atas ialah kandungan terperinci Mengapa Margin Auto Tidak Berfungsi dengan Kedudukan Mutlak dalam CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!