Bagaimanakah Saya Boleh Memusatkan Elemen dengan Sempurna dalam Tetingkap Penyemak Imbas Tanpa mengira Saiz?-tutorial css-php.cn

Bagaimanakah Saya Boleh Memusatkan Elemen dengan Sempurna dalam Tetingkap Penyemak Imbas Tanpa mengira Saiz?

Susan Sarandon

Lepaskan： 2024-11-30 07:36:16

asal

365 orang telah melayarinya

How Can I Perfectly Center an Element in a Browser Window Regardless of Size?

Pemusatan Elemen Sempurna Dalam Windows Pelayar

Untuk pemusatan elemen yang tepat dan stabil dalam tetingkap penyemak imbas, tanpa mengira dimensi tetingkap, konfigurasi bar alat , atau resolusi skrin, penyelesaian berikut menawarkan pendekatan yang berkesan.

Untuk mencapai pemusatan ini, elemen dalam soalan, contohnya

, hendaklah diberikan sifat CSS berikut:

position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);

Salin selepas log masuk

Kedudukan: mutlak: Sifat ini mengalih keluar elemen daripada aliran dokumen biasa , membenarkannya diletakkan secara bebas dalam tetingkap penyemak imbas.
Atas: 50%; Kiri: 50%;: Sifat ini menetapkan kedudukan atas dan kiri elemen kepada 50% ketinggian dan lebar tetingkap, masing-masing. Secara lalai, ini meletakkan elemen di tengah tetingkap secara menegak dan mendatar.
Transform: translate(-50%,-50%);: Sifat transform melaraskan kedudukan elemen selanjutnya dengan menterjemahkannya separuh tinggi dan lebarnya. Pembetulan ini memastikan titik tengah elemen sejajar sempurna dengan bahagian tengah tetingkap.

Dengan sifat CSS ini, elemen yang disasarkan akan sentiasa berada di tengah dalam tetingkap penyemak imbas, tanpa mengira saiz tetingkap atau faktor lain.

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