Bagaimana Mendatar dan Menegak Memusatkan Elemen Kedudukan Tetap?

Cara Memusatkan Kedudukan:Elemen tetap

Masalah:

Memusatkan "kedudukan: tetap;" kotak timbul secara mendatar dan menegak dengan lebar dan ketinggian dinamik, walaupun menggunakan margin: 5% auto;

Penyelesaian:

Terdapat beberapa pendekatan untuk mencapai ini:

Pendekatan 1: Lebar Tetap dan Ketinggian

1. Tetapkan bahagian atas dan kiri kepada 50% untuk memusatkan sudut kiri atas div.
2. Tetapkan margin-atas dan margin-kiri kepada separuh negatif daripada ketinggian dan lebar div untuk mengalihkan pusat ke arah tengah.

position: fixed;
width: 500px;
height: 200px;
top: 50%;
left: 50%;
margin-top: -100px; /* Negative half of height */
margin-left: -250px; /* Negative half of width */

Pendekatan 2: Lebar Dinamik dan/atau Tinggi

1. Gunakan penjelmaan bukannya jidar, tetapkannya kepada separuh negatif daripada lebar relatif div dan ketinggian.

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

Pendekatan 3: Lebar Tetap, Tetapi Tidak Peduli Tentang Pemusatan Menegak

1. Tambah kiri: 0 dan kanan: 0 kepada elemen, sambil menetapkan margin-kiri dan margin-kanan kepada auto.

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

Atas ialah kandungan terperinci Bagaimana Mendatar dan Menegak Memusatkan Elemen Kedudukan Tetap?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!