Mengapa \"margin: auto\" tidak berfungsi dengan Elemen yang Diposisikan Benar?

Memahami Isu Auto Margin Kedudukan Mutlak

Apabila menggunakan "kedudukan: mutlak" pada elemen dengan "margin-kiri: auto" dan " margin-right: auto," anda mungkin perasan bahawa margin kelihatan tidak mempunyai kesan. Tingkah laku ini berbeza daripada "kedudukan: relatif," di mana margin berfungsi seperti yang diharapkan. Untuk memahami percanggahan ini, mari kita mendalami mekanik asas.

Apabila sesuatu elemen diletakkan secara mutlak, ia dialih keluar daripada aliran biasa dokumen. Ini bermakna ia tidak lagi berinteraksi dengan unsur jirannya dan saiznya ditentukan semata-mata oleh dimensi eksplisitnya atau oleh saiz bekasnya. Akibatnya, jika lebar elemen tidak ditetapkan secara eksplisit, nilai yang dikira oleh penyemak imbas ialah 'auto', yang dalam kebanyakan kes ialah 0.

Dalam senario ini, menggunakan "margin-left: auto" dan "margin-right: auto" cuba mencipta ruang di sekeliling elemen dengan menetapkan margin kiri dan kanan kepada separuh lebar elemen. Walau bagaimanapun, memandangkan lebar pengiraan elemen ialah 0, nilai margin yang dikira juga menjadi 0. Inilah sebabnya mengapa margin kelihatan tidak mempunyai kesan.

Sebaliknya, apabila "kedudukan: relatif" digunakan, elemen itu kekal dalam aliran biasa dokumen. Saiznya ditentukan oleh kandungannya dan ruang yang didudukinya dalam aliran. Apabila "margin-left: auto" dan "margin-right: auto" digunakan, margin dikira berdasarkan lebar sebenar elemen, yang bukan sifar dalam kes ini. Oleh itu, jidar digunakan dengan betul, menyebabkan elemen dipusatkan dalam elemen yang mengandunginya.

Untuk memusatkan elemen yang diposisikan secara mutlak, anda boleh menentukan lebar dan ketinggiannya dan kemudian menggunakan "kedudukan: mutlak; kiri: 50 %; mengubah: terjemah(-50%, -50%);" untuk memusatkannya di dalam bekasnya. Kaedah ini meletakkan elemen dengan tepat di lokasi yang dikehendaki, walaupun apabila jidar ditetapkan kepada 'auto'.

Atas ialah kandungan terperinci Mengapa \"margin: auto\" tidak berfungsi dengan Elemen yang Diposisikan Benar?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!