Bagaimana untuk memusatkan css

Dalam pembangunan bahagian hadapan, reka letak berpusat adalah keperluan biasa, terutamanya dalam pembangunan mudah alih Untuk menyelaraskan gaya dan keindahan visual, kita perlu memusatkan elemen. Berikut ialah beberapa kaedah pemusatan CSS biasa.

1. Reka letak berpusat mendatar

1. margin: 0 auto

Ini ialah kaedah pemusatan mendatar yang paling biasa digunakan. Cuma tambahkan jidar kiri dan kanan daripada elemen tersebut. Kaedah ini berfungsi untuk elemen blok, tetapi tidak berfungsi apabila elemen anda diposisikan atau terapung secara mutlak.

.box {
  width: 200px;
  margin: 0 auto;
}

2. text-align: center

Apabila elemen yang anda perlukan untuk tengah secara mendatar ialah elemen sebaris, anda boleh menggunakan atribut text-align: center kepada induknya bekas Hanya pusatkan teks.

.parent {
  text-align: center;
}
.child {
  display: inline-block;
}

3. Reka Letak Kotak Fleksibel

Reka letak fleksibel ialah kaedah reka letak CSS yang berkuasa yang boleh mencapai banyak kesan pemusatan dengan mudah. Menggunakan flexbox, kita boleh meletakkan elemen anak di tengah bekas induk.

.parent {
  display: flex;
  justify-content: center;
}
.child {
  width: 50px;
}

2. Susun atur pemusatan menegak

1. tinggi garisan

Ini ialah kaedah pemusatan menegak yang paling mudah, cuma tukar ketinggian garisan elemen Hanya tetapkan ia sama dengan ketinggiannya.

.box {
  height: 80px;
  line-height: 80px;
}

2. sel meja

Menggunakan paparan: atribut jadual dan sel jadual, anda boleh mencapai kesan pemusatan menegak elemen dengan mudah.

.parent {
  display: table;
}
.child {
  display: table-cell;
  vertical-align: middle;
}

3. Susun Letak Kotak Fleksibel

Seperti pemusatan mendatar, pemusatan menegak elemen juga boleh dicapai menggunakan Flexbox.

.parent {
  display: flex;
  align-items: center;
}
.child {
  height: 50px;
}

3. Susun atur pemusatan mendatar dan menegak

1. Kedudukan mutlak dan margin negatif

Menggunakan kedudukan mutlak dan margin negatif boleh mencapai pemusatan mendatar dan menegak dengan mudah daripada unsur.

.parent {
  position: relative;
}
.child {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -25px; /* height/2 */
  margin-left: -25px; /* width/2 */
  height: 50px;
  width: 50px;
}

2. Transform

Menggunakan Transform, anda juga boleh mencapai pemusatan mendatar dan menegak elemen Hanya tetapkan atribut translateX dan translateY elemen kepada -50%.

.parent {
  position: relative;
}
.child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 50px;
  width: 50px;
}

3. Flexbox

Flexbox juga merupakan pilihan terbaik untuk mendatar dan menegak elemen. Tetapkan bekas induk elemen untuk memaparkan: flex, dan kemudian gunakan sifat justify-content dan align-item untuk mencapai reka letak berpusat.

.parent {
  display: flex;
  justify-content: center;
  align-items: center;
}
.child {
  height: 50px;
  width: 50px;
}

Di atas adalah kaedah pemusatan CSS biasa. Dalam pembangunan sebenar, kaedah pemusatan yang paling sesuai harus dipilih berdasarkan jenis, struktur, keperluan dan faktor lain unsur tersebut.

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