Bagaimana untuk Memusatkan DIV Kedudukan Tetap Menggunakan CSS?

Memusatkan DIV Kedudukan Tetap

Memusatkan DIV kedudukan tetap pada halaman web boleh dilakukan dengan mudah dengan elemen kedudukan mutlak menggunakan CSS. Godam yang melibatkan kiri: 50%, lebar: 400px;, dan margin-kiri: -200px; memusatkan elemen secara berkesan dengan menetapkan jidar kirinya kepada separuh lebarnya.

Walau bagaimanapun, pendekatan ini gagal apabila berurusan dengan DIV kedudukan tetap. Sebaliknya, sudut paling kiri elemen diletakkan pada 50%, mengabaikan pengisytiharan margin-kiri. Untuk menyelesaikan isu ini dan menjajarkan elemen kedudukan tetap di tengah, kaedah alternatif diperlukan.

Penyelesaian Menggunakan Transformasi CSS3

Pendekatan yang lebih berkesan menggunakan sifat transformasi CSS3, yang membolehkan kedudukan elemen yang tepat tanpa bergantung pada margin.

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

Dalam hal ini kod:

• kedudukan: tetap mengekalkan elemen dalam kedudukan tetap pada halaman.
• kiri: 50% menjajarkan tepi kiri elemen ke tanda 50% halaman.
• transformasi: terjemah(-50%, 0) mengimbangi elemen dengan separuh lebarnya dalam arah mendatar negatif, berpusat dengan berkesan ia.

Kaedah ini menyediakan pemusatan yang tepat untuk elemen kedudukan tetap, walaupun tanpa menyatakan lebar tetap atau relatif.

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