Bagaimanakah Saya Boleh Memusatkan Elemen dengan Sempurna dalam Tetingkap Penyemak Imbas Menggunakan CSS?

Menjajarkan Elemen Secara Tengah dalam Tetingkap Penyemak Imbas

Dalam pembangunan web, selalunya wajar untuk meletakkan elemen dengan tepat dalam tetingkap penyemak imbas pengguna. Memusatkan elemen secara menegak dan mendatar bebas daripada saiz tetingkap penyemak imbas yang berbeza-beza, resolusi skrin dan bar alat boleh menjadi satu cabaran.

Penyelesaian: Menggunakan Kedudukan Mutlak

Penyelesaian terletak pada menggunakan kedudukan mutlak, yang mengalih keluar elemen daripada aliran dokumen biasa dan membolehkan manipulasi piksel yang tepat. Begini cara untuk mencapai ini dengan CSS:

div#wrapper {
    position: absolute;
    top:  50%;
    left: 50%;
    transform: translate(-50%,-50%);
}

Penjelasan:

• kedudukan: mutlak: Mengalihkan elemen keluar daripada aliran dokumen dan membolehkan kedudukan mutlak.
• atas: 50%: Menetapkan kedudukan menegak elemen ke tengah tepat tetingkap penyemak imbas.
• kiri: 50%: Menetapkan kedudukan mendatar elemen ke tengah tetingkap penyemak imbas.
• transformasi: terjemah(-50%,-50%): Melaraskan kedudukan unsur relatif kepada koordinat atas dan kirinya. Ini memastikan bahawa elemen diletakkan di sekeliling titik tengahnya, dengan itu memastikan ia berada di tengah dengan sempurna dalam tetingkap penyemak imbas.

Dengan melaksanakan kod ini, anda boleh memusatkan mana-mana elemen HTML dengan berkesan, seperti

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Memusatkan Elemen dengan Sempurna dalam Tetingkap Penyemak Imbas Menggunakan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!