Bagaimana untuk memusatkan div dengan css

Cara memusatkan Div dengan CSS

Dalam reka bentuk web, adalah sangat penting untuk menjadikan halaman itu memberikan kesan yang menarik. Memusatkan Div ialah keperluan biasa dalam mereka bentuk halaman web Hari ini kami akan memperkenalkan cara menggunakan CSS untuk memusatkan Div.

Kaedah 1: Gunakan atribut kedudukan dan ubah

Atribut kedudukan digunakan untuk menentukan kaedah penentududukan elemen, dan atribut transformasi digunakan untuk menukar elemen.

Pertama, tetapkan lebar dan ketinggian tetap dalam CSS untuk Div ​​yang perlu dipusatkan, kemudian tetapkan atribut kedudukannya kepada mutlak, dan tetapkan kedua-dua atribut kiri dan atas kepada 50% kemudian, gunakan transformasi atribut Terjemahkan Div ke kiri atas dengan separuh lebar dan tingginya sendiri:

.center-div {
  position: absolute;
  width: 300px;
  height: 150px;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

Ini akan memusatkan Div secara mendatar dan menegak dalam bekas induk.

Kaedah 2: Gunakan Reka Letak Flex

Reka letak fleksibel ialah kaedah reka letak baharu yang diperkenalkan dalam CSS3, yang boleh digunakan untuk memusatkan elemen secara mendatar dan menegak.

Mula-mula, tetapkan atribut paparan bekas induk kepada lentur, kemudian tetapkan atribut justify-content ke tengah, yang akan memusatkan kandungan secara mendatar kemudian tetapkan atribut align-item ke tengah, yang akan Pusatkan kandungan secara menegak.

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

.parent .center-div {
  width: 300px;
  height: 150px;
}

Kaedah 3: Gunakan atribut penjajaran teks dan penjajaran menegak

sesuai untuk situasi di mana hanya terdapat satu baris teks di dalamnya.

Untuk memusatkan Div, anda boleh menggunakan atribut penjajaran teks dalam bekas induk untuk memusatkan teks dalam secara mendatar dan atribut penjajaran menegak untuk memusatkan teks secara menegak.

.parent {
  text-align: center;
  line-height: 150px;
}

.parent .center-div {
  display: inline-block;
  vertical-align: middle;
  width: 300px;
  height: 150px;
}

Ringkasan:

Tiga kaedah di atas untuk mencapai pemusatan elemen adalah dengan menetapkan beberapa atribut pada bekas induk dahulu, dan kemudian mengenakan beberapa sekatan pada elemen anak. Kaedah yang mana untuk digunakan perlu dipilih mengikut situasi tertentu CSS adalah sangat fleksibel dan kita perlu menguasai pelbagai penggunaannya untuk mencapai permainan percuma dalam reka bentuk web.

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