Bagaimana untuk menetapkan pemusatan dalam css? Analisis ringkas kaedah biasa

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 boleh mendatar teks dalaman elemen peringkat blok. . Contohnya, teg p, h1, h2 dan lain-lain, kod sampel adalah seperti berikut:

div {
  text-align: center;
}

2 Gunakan margin (untuk elemen peringkat blok)

atribut jidar secara mendatar elemen peringkat blok tengah Hanya tetapkan margin kiri dan kanan kepada auto Kod sampel adalah seperti berikut:

div {
  margin: 0 auto;
}

3 Gunakan kedudukan dan ubah (untuk elemen peringkat blok)

Atribut kedudukan dan atribut transformasi boleh dilaksanakan pada elemen peringkat blok Untuk memusatkan secara mendatar, anda perlu menetapkan atribut kedudukan kepada mutlak atau tetap, dan kemudian gunakan atribut transformasi untuk menterjemahkan elemen 50% ke kiri. Kod sampel adalah seperti berikut:

div {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

2 Pempusatan menegak

1 Gunakan ketinggian garis (untuk elemen sebaris)

atribut ketinggian garis boleh mencapai menegak. pemusatan elemen sebaris Tengah, cuma tetapkan nilai ketinggian garisan kepada ketinggian bekas Kod sampel adalah seperti berikut:

div {
  height: 100px;
  line-height: 100px;
}

2. Gunakan flexbox (untuk elemen peringkat blok)

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

.container {
  display: flex;
  align-items: center;
  justify-content: center;
}

3 Gunakan kedudukan dan ubah (untuk elemen peringkat blok)

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 {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

Ringkasan:

Di atas adalah beberapa cara untuk mencapai pemusatan dalam CSS, masing-masing mempunyai kelebihan dan kekurangan masing-masing. Anda boleh memilih kaedah yang sesuai untuk mencapai matlamat anda dalam situasi yang berbeza. 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 menetapkan pemusatan dalam css? Analisis ringkas kaedah biasa. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!