Bagaimanakah CSS `margin: auto` Elemen Pusat?

Keajaiban 'Auto' dalam Jidar CSS

Adalah pengetahuan umum bahawa jidar CSS menentukan ruang di sekeliling elemen. Tetapi bagaimana jika kita menggunakan 'auto' sebagai nilai?

Memahami Peranan 'Auto'

Apabila digunakan pada parameter kedua margin, 'auto' memperkasakan pelayar dengan tanggungjawab menentukan margin kiri dan kanan dengan sendirinya. Ia mencapai ini dengan menetapkan kedua-dua jidar secara sama rata.

Contoh: Memusatkan Objek

Mari kita pertimbangkan senario di mana kita mempunyai bekas induk dengan lebar 100px dan elemen anak dengan lebar 50px. Dengan menggunakan 'margin: 0 auto', penyemak imbas mengira ruang yang tinggal (50px) dan membahagikannya sama rata antara margin kiri dan kanan.

Ini menghasilkan pengiraan berikut:

freeSpace = 100 - 50 = 50
equalShare = freeSpace / 2 = 25

margin-left: 25
margin-right: 25

Oleh itu, elemen anak berpusat di dalam ibu bapa bekas.

Nota Tambahan

• Adalah tidak perlu untuk menentukan lebar elemen induk untuk 'auto' berfungsi. Hanya lebar objek kanak-kanak diperlukan.
• 'Auto' juga boleh digunakan untuk parameter pertama jidar, menunjukkan bahawa jidar atas dan bawah harus ditetapkan sama.

Atas ialah kandungan terperinci Bagaimanakah CSS `margin: auto` Elemen Pusat?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!