Bagaimana untuk Memusatkan Kandungan Secara Menegak Dalam Div?

Penjajaran Menegak Kandungan dalam Dimensi Div Tertakrif

Memusatkan kandungan secara menegak dalam div dengan lebar dan ketinggian yang ditentukan boleh dicapai melalui pelbagai kaedah . Mari terokai beberapa pilihan popular:

1. Paparan: Table-Cell untuk Div ​​Induk

Menetapkan paparan div induk kepada sel jadual dan menggunakan penjajaran menegak: tengah pada kandungan kanak-kanak membenarkan pemusatan menegak.

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

2. Paparan: Sekat dan Paparan: Table-Cell

Menetapkan paparan div induk untuk menyekat dan paparan kandungan anak ke sel jadual mencapai hasil yang serupa.

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

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

3. Div dan Paparan Induk Terapung: Table-Cell

Mengapungkan div induk dan menetapkan paparan kandungan kanak-kanak kepada sel jadual juga menghasilkan pemusatan menegak.

.parent-div {
  float: left;
  text-align: center;
}

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

4. Kedudukan: Relatif dan Kedudukan: Mutlak

Dengan menetapkan kedudukan div induk kepada relatif dan kedudukan kandungan anak kepada mutlak, atas hingga 50% dan margin-atas hingga -50%, pemusatan menegak boleh dicapai. Walau bagaimanapun, kaedah ini memerlukan pelarasan manual untuk senario ketinggian yang berbeza.

.parent-div {
  position: relative;
  height: 100px;
  width: 100px;
}

.child-content {
  position: absolute;
  top: 50%;
  margin-top: -50%;
  width: 100px;
}

Atas ialah kandungan terperinci Bagaimana untuk Memusatkan Kandungan Secara Menegak Dalam Div?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!