Bagaimana untuk memusatkan div dalam css

Kaedah untuk memusatkan div dalam CSS termasuk menggunakan atribut margin, reka letak kotak flex, kedudukan mutlak dan reka letak grid. Pengenalan terperinci: 1. Gunakan atribut margin Cara paling mudah ialah menggunakan atribut margin Dengan menetapkan margin kiri dan kanan kepada auto, anda boleh memusatkan div secara mendatar diperkenalkan dalam CSS3 Anda boleh mencapai pemusatan elemen dengan mudah 3. Gunakan kedudukan mutlak, dengan menggunakan kedudukan mutlak, dsb.

Dalam reka bentuk web, pemusatan adalah keperluan biasa. Sama ada ia memusatkan imej, teks atau bekas div, semuanya boleh dicapai melalui CSS. Artikel ini akan memperkenalkan beberapa kaedah biasa untuk memusatkan div.

Kaedah 1: Gunakan atribut margin

Cara paling mudah ialah menggunakan atribut margin. Dengan menetapkan margin kiri dan kanan kepada auto, anda boleh memusatkan div secara mendatar.

.div-center {
  margin-left: auto;
  margin-right: auto;
}

Kaedah ini sesuai apabila lebar div diketahui. Jika lebar div tidak diketahui, anda boleh menggunakan atribut paparan untuk menetapkannya kepada inline-block atau table, dan kemudian gunakan margin:auto untuk mencapai pemusatan.

.div-center {
  display: inline-block;
  margin-left: auto;
  margin-right: auto;
}

.div-center {
  display: table;
  margin-left: auto;
  margin-right: auto;
}

Kaedah 2: Gunakan susun atur flexbox

Flexbox ialah model susun atur kotak fleksibel yang diperkenalkan dalam CSS3, yang boleh memusatkan elemen dengan mudah. Pemusatan mendatar dan menegak dicapai dengan menetapkan sifat paparan elemen induk kepada lentur, dan kemudian menggunakan sifat justify-content dan align-item.

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

Letakkan div yang perlu dipusatkan dalam bekas dan tetapkan gaya di atas pada bekas untuk mencapai kesan pemusatan.

Kaedah Tiga: Gunakan Kedudukan Mutlak

Dengan menggunakan kedudukan mutlak, anda boleh memusatkan div berbanding elemen induknya.

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

Tambah kedudukan: atribut relatif dalam elemen induk, kemudian tetapkan kedudukan: mutlak dalam elemen anak, dan gunakan atribut atas, kiri dan ubah untuk mencapai kesan pemusatan.

Kaedah 4: Gunakan reka letak grid

Reka letak Grid CSS ialah model reka letak dua dimensi yang membolehkan anda memusatkan elemen dengan mudah dengan membahagikan grid kepada baris dan lajur.

.container {
  display: grid;
  place-items: center;
}

Letakkan div yang perlu dipusatkan dalam bekas dan tetapkan gaya di atas pada bekas untuk mencapai kesan pemusatan.

Ringkasan

Melalui kaedah di atas, kita boleh mencapai paparan berpusat div dalam reka bentuk web dengan mudah. Bergantung pada keperluan khusus, pilih kaedah yang sesuai untuk mencapai kesan pemusatan. Sama ada anda menggunakan atribut margin, susun atur flexbox, kedudukan mutlak atau susun atur grid, anda boleh memusatkan div secara mendatar dan menegak untuk meningkatkan keindahan dan pengalaman pengguna halaman web.

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