berpusat css

css pemusatan: 1. Pemusatan mendatar dicapai melalui "margin: 0 auto; text-align: center"; 2. Pemusatan mendatar dicapai melalui "display:flex" 3. Pemusatan mendatar dicapai melalui "display:table- sel" dan "margin-kiri" mencapai pemusatan.

Cara untuk menetapkan pemusatan css:

1 Gunakan margin: 0 auto;

Kaedah ini adalah yang paling biasa digunakan untuk mencapai pemusatan mendatar CSS Kira-kira 60% daripada pemusatan mendatar CSS dalam pembangunan bahagian hadapan dicapai melalui "margin: 0 auto; text-align: center".

2. Gunakan display:flex untuk mencapai pemusatan mendatar CSS.

Dengan semakin banyak flexbox yang serasi, penyelesaian pemusatan mendatar CSS melalui "display:flex" menjadi semakin popular.

Prinsip pemusatan mendatar CSS melalui display:flex ialah elemen induk paparan:flex;flex-direction:column; dan elemen anak align-self:center;

Ini adalah sama seperti prinsip pemusatan menegak CSS , kecuali dalam flex Terdapat perbezaan dalam -arah, satu baris (nilai lalai) dan satu lagi adalah lajur.

3 Laksanakan pemusatan mendatar CSS melalui paparan:sel-meja dan jidar-kiri.

Untuk situasi di mana lebar kedua-dua elemen induk dan elemen anak ditentukan, adalah sesuai untuk melaksanakan pemusatan mendatar CSS melalui display:table-cell dan margin-left.

Apabila digunakan, elemen induk memaparkan:table-cell, dan elemen anak diberi margin-kiri separuh daripada baki lebar.

Atas ialah kandungan terperinci berpusat css. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!