Mengapa CSS `top: 50%` Tidak Sentiasa Memusatkan Elemen?

Peratusan Teratas CSS Tidak Menjajarkan Seperti Yang Dijangkakan

Dalam reka letak CSS responsif, menetapkan sifat teratas menggunakan peratusan kadangkala boleh bertindak secara tidak dijangka, manakala sebelah kiri harta berfungsi seperti yang diharapkan. Ini disebabkan oleh cara peratusan dikira berhubung dengan dimensi bekas induk.

Memahami Kedudukan Relatif

Apabila menetapkan peratusan atas atau kiri untuk elemen yang diletakkan secara mutlak, ia adalah penting untuk mempunyai ketinggian dan/atau lebar yang ditentukan untuk bekas induk. Ini kerana peratusan dikira berdasarkan dimensi elemen induk.

Penyelesaian: Tentukan Dimensi Bekas Induk

Untuk menjadikan top:50% berfungsi seperti yang diharapkan, anda perlu menentukan ketinggian bekas induk. Ini membolehkan penyemak imbas mengira titik tengah bekas dengan tepat dan meletakkan elemen anak dengan sewajarnya.

Sebagai contoh, jika anda mentakrifkan bekas induk seperti berikut:

<div>

Kemudian, anak elemen dengan bahagian atas: 50%; akan diletakkan di tengah-tengah bekas induk secara menegak.

Penyelesaian Alternatif: Bekas Induk Regang

Pilihan lain ialah meregangkan bekas induk untuk mengisi ruang yang mengandunginya menggunakan sifat atas, bawah, kiri dan kanan. Kaedah ini juga membenarkan harta atas:50% menjajarkan elemen anak di tengah:

<div>

Dengan memberikan dimensi yang jelas atau meregangkan bekas induk, anda boleh memastikan bahagian atas:50% berfungsi dengan betul untuk responsif Reka letak CSS, membenarkan kedudukan tepat elemen kanak-kanak.

Atas ialah kandungan terperinci Mengapa CSS `top: 50%` Tidak Sentiasa Memusatkan Elemen?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!