Mengapakah 'atas: 50%' Tidak Memusatkan Elemen dengan Betul dalam Reka Letak Responsif?

Mengapa CSS "top: 50%" Tidak Berfungsi Seperti Yang Dijangkakan dalam Reka Letak Responsif?

Dalam reka bentuk web responsif, menggunakan peratusan untuk CSS sifat seperti "atas" adalah penting untuk mengekalkan kedudukan elemen merentas saiz skrin yang berbeza. Walau bagaimanapun, isu boleh timbul apabila "atas: 50%" tidak menjajarkan elemen dengan betul.

Pertimbangkan kod HTML dan CSS berikut:

<div>

Isu di sini ialah "atas" " harta untuk div anak merujuk ketinggian div induk, yang tidak ditentukan. Akibatnya, div kanak-kanak tidak akan diletakkan pada 50% dari bahagian atas port pandangan.

Untuk menyelesaikannya, anda mesti menentukan ketinggian khusus untuk div induk. Contohnya:

<div>

Kini, div anak akan diletakkan pada 50% dari bahagian atas div induk, yang mempunyai ketinggian yang ditentukan.

Sebagai alternatif, anda boleh meregangkan induk div untuk mengisi keseluruhan port pandangan dengan menetapkan sifat "atas," "bawah," "kiri" dan "kanan":

<div>

Dengan mentakrifkan dimensi div induk atau meregangkannya untuk mengisi port pandangan, anda memastikan bahawa peratusan seperti "atas: 50%" boleh menjajarkan elemen dengan betul dalam reka letak responsif.

Atas ialah kandungan terperinci Mengapakah 'atas: 50%' Tidak Memusatkan Elemen dengan Betul dalam Reka Letak Responsif?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!