Mengapakah `margin: auto` tidak memusatkan elemen kedudukan mutlak?

Gagal Pemusatan Elemen Yang Diposisikan Benar-Benar dengan Margin Auto

Apabila cuba memusatkan elemen yang diletakkan secara mutlak pada halaman menggunakan margin auto, jangkaan tingkah laku mungkin tidak berlaku. Khususnya, menetapkan kedua-dua jidar-kiri dan jidar-kanan kepada automatik gagal untuk memusatkan elemen, walaupun teknik ini berfungsi untuk elemen yang agak berkedudukan.

Percanggahan ini timbul kerana elemen yang diletakkan secara mutlak dikeluarkan daripada aliran biasanya. dalam susun atur dokumen. Dalam kedudukan terpisah ini, gelagat automatik jidar untuk menjajarkan elemen ke bekasnya tidak lagi digunakan.

Penyelesaian

Untuk memusatkan elemen dengan kedudukan mutlak dengan betul, pendekatan alternatif harus digunakan. Berikut ialah beberapa pilihan:

• Lebar Tetap dan Berpusat: Menetapkan lebar tetap dan menggunakan kiri: 50%; transform: terjemah(-50%, 0); pusatkan elemen secara mendatar.
• Mengandungi Induk: Letakkan elemen di dalam elemen induk dan tengahkannya menggunakan text-align: center.
• Flexbox: Gunakan reka letak flexbox untuk menjajarkan elemen secara mendatar dalam bekasnya.

Atas ialah kandungan terperinci Mengapakah `margin: auto` tidak memusatkan elemen kedudukan mutlak?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!