Bagaimana untuk memusatkan div dengan css

CSS ialah bahagian penting dalam pembangunan bahagian hadapan, dan memusatkan DIV ialah keperluan biasa. Hari ini, kita akan membincangkan cara untuk memusatkan DIV menggunakan CSS.

Pertama sekali, mari kita lihat dua kes pemusatan DIV Satu ialah DIV berpusat dalam tetingkap penyemak imbas, dan satu lagi ialah DIV berpusat dalam bekas di mana ia berada. terletak.

Kes pertama ialah DIV berpusat di dalam tetingkap penyemak imbas. Kita boleh mencapai ini melalui kaedah berikut.

Kaedah 1: Gunakan kedudukan dan jidar mutlak

Mula-mula, kami menetapkan DIV kepada kedudukan mutlak (kedudukan: mutlak;) dan menetapkan arah kiri, atas, kanan dan bawah ialah 0 , menjadikannya memenuhi keseluruhan tetingkap penyemak imbas. Kemudian, kami menetapkan atribut margin kepada auto untuk memusatkan DIV secara mendatar dan menegak, seperti yang ditunjukkan di bawah:

rreee

Kaedah 2: Gunakan susun atur flexbox

flexbox ( Susun atur fleksibel) adalah sangat popular kaedah susun atur, yang boleh mencapai pemusatan menegak dan mendatar dengan mudah Kodnya adalah seperti berikut:

div {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}

Kami menetapkan bekas di mana DIV terletak kepada susun atur kotak flex (paparan: flex ;), dan menetapkan item penjajaran. dan mewajarkan sifat kandungan ke tengah, supaya DIV boleh dipusatkan secara menegak dan mendatar.

Kaedah 3: Gunakan reka letak grid

Reka letak grid ialah kaedah reka letak yang lebih berkuasa daripada reka letak flexbox, dan ia boleh mencapai kesan reka letak yang lebih kompleks. Dari segi pelaksanaan pemusatan DIV, ia boleh ditulis seperti ini:

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

Kami menetapkan bekas di mana DIV terletak kepada susun atur grid (paparan: grid;), dan menetapkan atribut item tempat ke tengah, supaya DIV boleh dipusatkan Berpusat secara menegak dan mendatar.

Kes kedua ialah DIV berpusat di dalam bekas di dalamnya. Kita boleh mencapai ini dengan cara berikut.

Kaedah 1: Gunakan atribut penjajaran teks

Jika DIV ialah elemen sebaris, kita boleh menetapkan atribut penjajaran teks bagi bekas yang berada di tengah, supaya DIV boleh dijajarkan secara mendatar Berpusat. Kodnya adalah seperti berikut:

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

Di sini kami menetapkan DIV sebagai elemen blok sebaris supaya atribut lebar boleh ditetapkan padanya. Kemudian, tetapkan sifat penjajaran teks bekas di mana DIV terletak ke tengah ke tengah DIV secara mendatar.

Kaedah 2: Gunakan atribut margin

Jika DIV ialah elemen peringkat blok, kita boleh menggunakan atribut margin untuk mencapai pemusatan. Kodnya adalah seperti berikut:

.container {
  text-align: center;
}

div {
  display: inline-block;
}

Di sini kami menetapkan DIV sebagai elemen peringkat blok dan menetapkan lebarnya kepada 200px dan ketinggian kepada 200px. Kemudian, tetapkan margin kiri dan kanan DIV kepada auto untuk memusatkan DIV secara mendatar.

Kaedah 3: Gunakan susun atur flexbox

Begitu juga, kita boleh menggunakan susun atur flexbox untuk memusatkan DIV dalam bekas di mana ia berada. Kodnya adalah seperti berikut:

div {
  width: 200px;
  height: 200px;
  margin: 0 auto;
}

Kami menetapkan bekas di mana DIV terletak pada susun atur kotak flex, dan menetapkan kedua-dua sifat align-item dan justify-content ke tengah, supaya DIV boleh dipusatkan kedua-duanya secara menegak dan mendatar.

Ringkasnya, kita boleh menggunakan kaedah di atas untuk memusatkan DIV, dan memilih kaedah yang berbeza mengikut situasi tertentu. Saya harap artikel ini dapat membantu anda lebih memahami dan menggunakan teknik pemusatan dalam CSS.

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