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

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%);

1. Kedudukan: mutlak: Sifat ini mengalih keluar elemen daripada aliran dokumen biasa , membenarkannya diletakkan secara bebas dalam tetingkap penyemak imbas.
2. 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.
3. 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!

css for Property default this position transform Translate Other

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn