Bagaimana untuk Memusatkan Div Tetap dan Diposisikan Sempurna?

Membetulkan Penjajaran Pusat untuk Div ​​Kedudukan Tetap

Menjajarkan pusat div kedudukan tetap boleh menimbulkan cabaran menggunakan kaedah tradisional untuk elemen kedudukan mutlak. "Hack" untuk menetapkan sifat kiri kepada 50% dan margin-kiri kepada separuh lebar div gagal untuk div kedudukan tetap.

Untuk menyelesaikan isu ini dan mencapai pemusatan yang tepat, penyelesaian yang lebih baik melibatkan penggunaan CSS3 mengubah harta. Walaupun tanpa menetapkan lebar eksplisit, kaedah ini secara berkesan meletakkan div di tengah:

.centered {
    position: fixed;
    left: 50%;
    transform: translate(-50%, 0);
}

Penyelesaian ini menjajarkan pusat div dengan tengah port pandangan, memastikan ia kekal berpusat walaupun apabila tetingkap penyemak imbas diubah saiz . Selain itu, sifat transformasi disokong secara meluas oleh penyemak imbas moden.

Bonus: Penjajaran Pusat Yang Diperbaiki untuk Elemen Yang Diposisikan Secara Mutlak

Untuk elemen yang diletakkan secara mutlak, menggunakan pendekatan berikut menawarkan kaedah yang lebih tepat dan serba boleh untuk pemusatan:

.centered {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

Di sini, elemen itu benar-benar diletakkan dan diselaraskan dengan mengubah kedudukannya berdasarkan ketinggian dan lebarnya sendiri. Kaedah ini menyediakan pemusatan yang tepat tanpa pelarasan margin diperlukan.

Atas ialah kandungan terperinci Bagaimana untuk Memusatkan Div Tetap dan Diposisikan Sempurna?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!