Bagaimanakah Saya Memusatkan Div Kedudukan Tetap Menggunakan CSS?

Memusatkan Div Kedudukan Tetap

Apabila bekerja dengan div kedudukan tetap, menjajarkannya ke tengah halaman boleh menjadi satu cabaran. "Godam" tradisional yang digunakan untuk elemen kedudukan mutlak tidak digunakan. Sebaliknya, sudut paling kiri div diletakkan pada 50%, mengabaikan margin-kiri.

Penyelesaian Menggunakan Transformasi CSS3

Penyelesaian terletak pada penggunaan sifat transformasi CSS3:

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

Kaedah ini menggunakan sifat transformasi untuk mengalihkan elemen ke kiri dengan separuh lebarnya, dengan berkesan memusatkannya pada halaman.

Bonus: Memusatkan Elemen Diposisikan Secara Mutlak

Untuk elemen yang diposisikan secara mutlak, kaedah yang lebih baik daripada "hack" margin kiri ialah menggunakan CSS3 flexbox:

.centered {
    position: absolute;
    left: 50%;
    transform: translate(-50%, 0);
    display: flex;
    justify-content: center;
    align-items: center;
}

Ini menjajarkan kandungan elemen yang diposisikan secara mutlak kepada tengah.

Contoh

Berikut ialah contoh untuk menunjukkan perbezaan:

<div class="almost-centered">I'm almost centered DIV lorem ipmsum</div>

<div class="centered">I'm exactly centered DIV using CSS3</div>

Div "hampir berpusat" menggunakan "godam" kiri margin manakala div "berpusat" menggunakan sifat transformasi CSS3. Seperti yang anda lihat, div "berpusat" diletakkan dengan tepat di tengah.

Atas ialah kandungan terperinci Bagaimanakah Saya Memusatkan Div Kedudukan Tetap Menggunakan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!