Mengapa 'top: 50%' Tidak Berfungsi Seperti Yang Dijangkakan dalam CSS?

Offset Peratusan CSS: Memahami Sebab "atas: 50%" Tidak Berfungsi

Dalam bidang reka letak CSS responsif, tetapkan nilai peratusan untuk sifat "atas" kadangkala boleh terbukti mencabar. Walaupun "kiri: 50%" beroperasi seperti yang dijangkakan, menggunakan "atas: 50%" membuahkan hasil yang tidak dijangka.

原因

Kuncinya terletak pada pemahaman bagaimana peratusan untuk harta "atas" dikira. Tidak seperti "kiri", yang merujuk kepada lebar bekas, "atas" merujuk kepada ketinggian bekas. Oleh itu, jika ketinggian bekas tidak ditentukan, nilai "atas: 50%" berkesan menjadi 50% daripada 0px, menyebabkan tiada anjakan menegak.

Penyelesaian

Untuk menyelesaikan masalah ini, terdapat dua perkara utama pendekatan:

1. Tentukan Dimensi untuk Bekas Induk:
   Nyatakan nilai tinggi dan lebar yang jelas untuk bekas untuk memberikan rujukan bagi offset berasaskan peratusan. Contohnya:

   <div>

2. Rentangkan Bekas Induk:
   Sebagai alternatif, tentukan ketinggian dan lebar bekas menggunakan nilai mutlak dan rentangkannya ke tepi kandungannya elemen:

   <div>

Dengan melaksanakan salah satu daripada penyelesaian ini, anda boleh memastikan bahawa "atas: 50%" berfungsi seperti yang dimaksudkan, menyediakan pemusatan menegak dalam reka letak responsif.

Atas ialah kandungan terperinci Mengapa 'top: 50%' Tidak Berfungsi Seperti Yang Dijangkakan dalam CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!