Bagaimana untuk memusatkan div dengan css

Cara memusatkan div dengan CSS

Dalam penghasilan halaman web, kita selalunya perlu memusatkan elemen div untuk menjadikan halaman lebih cantik dan lebih mudah dibaca. Artikel ini akan memperkenalkan beberapa cara untuk memusatkan div dalam CSS.

1. Gunakan penjajaran teks ke tengah

Atribut penjajaran teks digunakan terutamanya untuk menetapkan penjajaran kandungan sebaris dalam elemen peringkat blok. Apabila nilai atribut penjajaran teks berada di tengah, kandungan elemen akan dipusatkan secara mendatar.

Untuk memusatkan div, anda boleh menetapkan lebar elemen div kepada nilai tetap dan menetapkan sifat marginnya kepada auto, supaya div akan muncul di tengah-tengah elemen induknya.

Kod CSS adalah seperti berikut:

div {
  width: 300px;
  margin: 0 auto;
  text-align: center;
}

Kod CSS di atas menetapkan lebar div kepada 300px, atribut margin ditetapkan kepada 0 auto, supaya div dipusatkan secara mendatar, dan atribut penjajaran teks ditetapkan ke tengah, jadi Kandungan div juga dipusatkan secara mendatar.

2. Gunakan flex untuk memusatkan

Flex ialah kaedah reka letak yang diperkenalkan oleh CSS3 reka letak Flex menyediakan berbilang atribut yang boleh menetapkan grid, penjajaran, pengisihan dan fungsi lain, yang sangat sesuai untuk Susun atur responsif.

Untuk menjadikan div berpusat menggunakan flex, anda boleh menetapkan paparan: flex kepada elemen induknya dan tetapkan atribut seperti justify-content dan align-item.

Kod CSS adalah seperti berikut:

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

.container div {
  width: 300px;
  height: 200px;
}

Dalam kod di atas, elemen .container ditetapkan untuk memaparkan: flex, yang digunakan untuk menjana bekas yang fleksibel. Sifat justify-content ditetapkan ke tengah ke tengah semua elemen anak secara mendatar;

3. Gunakan kedudukan mutlak ke tengah

Gunakan kedudukan mutlak untuk memusatkan elemen div dalam elemen induknya. Langkah-langkah khusus adalah seperti berikut:

Tetapkan atribut kedudukan elemen div kepada mutlak; atribut margin bagi elemen div Tetapkan kepada auto

menetapkan atribut kedudukan elemen induk kepada relatif.

Kod CSS adalah seperti berikut:

.parent {
  position: relative;
  height: 100%;
}

.child {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  width: 300px;
  height: 200px;
}

Dalam kod di atas, elemen .parent ditetapkan kepada kedudukan: relatif untuk kedudukan relatif. Elemen .child ditetapkan kepada kedudukan: mutlak untuk kedudukan mutlak. Tetapkan atribut atas, kiri, kanan dan bawah kepada 0, membenarkan elemen .child menduduki keseluruhan elemen .parent. Tetapkan nilai margin kepada auto untuk memusatkan elemen .child secara mendatar dan menegak.

Ringkasnya, perkara di atas ialah tiga kaedah pemusatan CSS biasa. Setiap kaedah mempunyai kelebihan dan kekurangannya sendiri, dan aplikasi khusus perlu dipilih mengikut situasi sebenar.

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