Bagaimana untuk Memusatkan Elemen `position:fixed` dengan Dimensi Dinamik?

Memusatkan Elemen Berposisi:tetap dengan Dimensi Dinamik

Apabila menggunakan position:fixed untuk mencipta kotak pop timbul yang harus dipusatkan pada skrin , berpusat secara mendatar dan menegak boleh memberikan cabaran. Ini kerana margin:5% auto; hanya menjajarkan elemen secara mendatar.

Untuk mencapai penjajaran yang diingini, strategi seguenti boleh digunakan:

Kaedah 1: Lebar dan Tinggi Diketahui

Jika lebar dan tinggi div diketahui, sifat atas dan kiri boleh ditetapkan kepada 50%. Selain itu, jidar atas dan jidar kiri hendaklah ditetapkan kepada separuh negatif daripada dimensi masing-masing div untuk mengalihkan pusat ke tengah.

position: fixed;
width: 500px;
height: 200px;
top: 50%;
left: 50%;
margin-top: -100px;
margin-left: -250px;

Kaedah 2: Lebar dan Tinggi Dinamik

Jika dimensi div adalah dinamik, sifat transformasi boleh digunakan dan bukannya jidar. Penjelmaan ditetapkan kepada separuh negatif lebar dan tinggi relatif div.

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

Kaedah 3: Lebar Tetap dan Penjajaran Menegak Tak Tentu

Jika lebar div adalah tetap dan penjajaran menegak tidak kritikal, kiri:0 dan kanan:0 boleh ditambah pada elemen bersama-sama dengan jidar-kiri dan jidar-kanan auto.

position: fixed;
width: 500px;
margin: 5% auto; /* Only centers horizontally not vertically! */
left: 0;
right: 0;

Dengan melaksanakan kaedah ini, anda boleh memusatkan elemen position:fixed dengan dimensi dinamik pada skrin, memastikan ia kekal tetap tanpa mengira saiz viewport.

Atas ialah kandungan terperinci Bagaimana untuk Memusatkan Elemen `position:fixed` dengan Dimensi Dinamik?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!