Bagaimana untuk memusatkan css

Cara memusatkan CSS: 1. Untuk pemusatan mendatar, anda boleh menggunakan "text-align" untuk elemen peringkat blok, "margin" untuk elemen peringkat blok dan "kedudukan" dan "transform" untuk elemen peringkat blok; 2. Untuk pemusatan menegak, anda boleh Gunakan "ketinggian garis" untuk elemen sebaris, "flexbox" untuk elemen peringkat blok dan "kedudukan" dan "transformasi" untuk elemen peringkat blok.

Dalam reka bentuk web, pemusatan adalah keperluan yang sangat biasa, terutamanya dalam reka letak. CSS menyediakan kaedah yang berbeza untuk mencapai pemusatan Mari kita lihat beberapa kaedah yang paling biasa.

1. Pemusatan mendatar

1. Gunakan penjajaran teks (untuk elemen peringkat blok)

atribut penjajaran teks untuk memusatkan teks dalaman elemen peringkat blok, seperti teg p, h1, h2 dan lain-lain. Kod sampel adalah seperti berikut ：

div {
text-align: center;
}

2 Gunakan jidar (untuk elemen peringkat blok)

atribut jidar ke tengah elemen tahap blok secara mendatar dan margin kanan ke auto, contoh Kod adalah seperti berikut:

div {
margin: 0 auto;
}

3 Gunakan kedudukan dan ubah (untuk elemen peringkat blok)

Atribut kedudukan dan atribut transformasi boleh mencapai pemusatan mendatar elemen peringkat blok, dan atribut kedudukan perlu Tetapkannya kepada mutlak atau tetap, dan kemudian gunakan atribut transformasi untuk menterjemahkan elemen 50% ke kiri. Kod sampel adalah seperti berikut:

div {
kedudukan: mutlak;
kiri: 50%;
transformasi: translateX(-50%);
}

2. Gunakan ketinggian garisan ( untuk elemen sebaris ) Atribut

ketinggian garis boleh memusatkan elemen sebaris secara menegak Hanya tetapkan nilai ketinggian garisan kepada ketinggian bekas adalah seperti berikut:

div {

tinggi: 100px;

baris. -ketinggian: 100px;
}


2. Gunakan flexbox (untuk elemen peringkat blok)

flexbox ialah kaedah reka letak yang diperkenalkan dalam CSS3, yang boleh mencapai pemusatan menegak elemen dengan mudah Anda perlu menetapkan paparan: flex pada bekas, dan kemudian gunakan align-item: tengah memusatkan elemen secara menegak. Kod contoh adalah seperti berikut:

.bekas {

paparan: flex;

align-item: tengah;
justify-content: center;
}


3

Atribut kedudukan dan Atribut transformasi juga boleh mencapai pemusatan menegak elemen Anda perlu menetapkan atribut kedudukan kepada mutlak atau tetap, dan kemudian gunakan atribut transformasi untuk menterjemahkan elemen ke atas sebanyak 50%. Kod sampel adalah seperti berikut:

div {

kedudukan: mutlak;

atas: 50%;

transformasi: translateY(-50%);
}


Ringkasan:

Di atas adalah beberapa cara untuk mencapai pemusatan dalam CSS, setiap daripada mereka Terdapat kelebihan dan kekurangan, dan dalam situasi yang berbeza anda boleh memilih kaedah yang sesuai untuk mencapai matlamat anda. Pada masa yang sama, penyemak imbas moden semakin baik dan lebih baik dalam menyokong CSS3, dan menggunakan reka letak flexbox CSS3 juga merupakan pilihan yang sangat mudah.

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