Bagaimanakah Saya Memusatkan Elemen dalam Tetingkap Pelayar Menggunakan CSS?

Menempatkan Elemen di Tengah Tetingkap Penyemak Imbas

Ia boleh menjadi keperluan biasa untuk meletakkan elemen web dengan tepat di tengah-tengah tetingkap penyemak imbas, tanpa mengira saiznya atau faktor lain. Ini boleh dicapai menggunakan sifat penentududukan CSS.

Penyelesaian:

Untuk memusatkan elemen dalam tetingkap penyemak imbas, kami menggunakan CSS berikut:

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

Penjelasan:

• Jawatan: mutlak; Mengalih keluar elemen daripada aliran biasa, membenarkan ia diposisikan dengan tepat.
• Atas: 50%; Letakkan bahagian atas elemen 50% dari bahagian atas penyemak imbas tingkap.
• Kiri: 50%; Letakkan tepi kiri elemen 50% dari tepi kiri tetingkap penyemak imbas.
• Ubah: terjemah(-50%,-50%); Laraskan kedudukan elemen untuk mengimbanginya secara berkesan sebanyak 50% dalam kedua-dua arah mendatar dan menegak. Ini memusatkan elemen dalam kawasan asalnya.

Dengan menggabungkan sifat ini, kita boleh mencapai pemusatan tepat bagi mana-mana elemen HTML dalam tetingkap penyemak imbas, tanpa mengira saiz atau reka letaknya.

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