Bagaimanakah Saya Boleh Memusatkan Elemen HTML dalam Tetingkap Pelayar Menggunakan CSS?

Memusatkan Elemen dalam Tetingkap Penyemak Imbas

Apabila matlamatnya adalah untuk meletakkan elemen HTML tepat di tengah-tengah sempadan tetingkap penyemak imbas, tanpa mengambil kira dimensinya, bar alat penyemak imbas reka letak dan resolusi skrin, pendekatan khusus diperlukan.

Penyelesaian melibatkan penggunaan kedudukan CSS: sifat mutlak, yang menanggalkan elemen daripada aliran dokumen biasa dan membolehkan ia diletakkan pada koordinat yang tepat. Selain itu, tetapan atas dan kiri kepada 50% meletakkan elemen pada titik separuh jalan secara menegak dan mendatar dalam tetingkap.

Untuk mengimbangi elemen dari kedudukan awal ini kembali ke pusat visualnya memerlukan penggunaan sifat transformasi dengan terjemah(-50%,-50%). Ini memastikan elemen kekal berpusat walaupun selepas titik utamanya (atas dan kiri) telah dilaraskan.

Berikut ialah kod CSS yang sepadan untuk mencapai kesan yang diingini:

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

Dengan melaksanakan kod ini, elemen HTML boleh diletakkan dengan tepat di tengah tetingkap penyemak imbas, bebas daripada sebarang faktor luaran.

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