Bagaimana untuk mencapai pemusatan menegak dalam css

Dalam pembangunan bahagian hadapan, pemusatan menegak elemen adalah keperluan yang sangat biasa. Bagi sesetengah pemula, ini mungkin perkara yang sangat menyusahkan. Walau bagaimanapun, sebenarnya terdapat banyak cara untuk mencapai pemusatan menegak menggunakan CSS Mari perkenalkan beberapa kaedah yang lebih praktikal di bawah.

Kaedah 1: Kedudukan mutlak + margin:auto

Ini ialah kaedah yang agak biasa Ia menggunakan ciri kedudukan mutlak CSS dan menetapkan nilai atas dan kiri serta Set margin ke auto untuk mencapai pemusatan menegak.

Mula-mula, anda perlu meletakkan elemen untuk dipusatkan menggunakan kedudukan mutlak:

.parent {
  position: relative;
}

.child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /* 其它样式 */
}

Kemudian, tetapkan margin kepada auto untuk mencapai pemusatan mendatar:

.child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: auto;
  /* 其它样式 */
}

Kelebihan kaedah ini ialah ia agak mudah difahami dan dilaksanakan, dan keserasiannya juga sangat baik. Walau bagaimanapun, ambil perhatian bahawa ia hanya berfungsi jika ketinggian elemen yang anda mahu pusatkan secara menegak diketahui.

Kaedah 2: Reka letak fleksibel

Reka letak fleksibel ialah mod reka letak yang baru ditambah dalam CSS3. Ia memudahkan pemusatan menegak.

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

.child {
  /* 其它样式 */
}

Kelebihan kaedah ini ialah ia sangat mudah dan intuitif, dan keserasiannya agak baik. Walau bagaimanapun, perlu diingat bahawa apabila ia perlu serasi dengan versi penyemak imbas yang lebih lama, beberapa pemprosesan keserasian perlu ditambah.

Kaedah 3: Reka letak jadual

Reka letak jadual juga merupakan kaedah reka letak CSS yang lebih lama, yang juga boleh digunakan untuk mencapai pemusatan menegak.

.parent {
  display: table;
  height: 100%;
}

.child {
  display: table-cell;
  vertical-align: middle;
  /* 其它样式 */
}

Kelebihan kaedah ini ialah ia sangat serasi dan mudah untuk dilaksanakan. Walau bagaimanapun, perlu diingatkan bahawa ia tidak sesuai untuk semua senario Jika kebolehsuaian dan fleksibiliti yang tinggi diperlukan, mungkin terdapat beberapa masalah.

Kaedah 4: Line-height

Terdapat juga kaedah yang lebih mudah, iaitu menggunakan Line-height untuk mencapai pemusatan menegak.

.parent {
  height: 300px; /* 定义容器高度 */
  line-height: 300px; /* 容器高度与line-height相同，使文本垂直居中 */
  text-align: center; /* 水平居中 */
}

.child {
  display: inline-block; /* 行内块级元素 */
  vertical-align: middle; /* 垂直居中 */
  /* 其它样式 */
}

Kelebihan kaedah ini ialah ia sangat mudah dan mempunyai keserasian yang baik. Walau bagaimanapun, perlu diingatkan bahawa ia hanya terpakai pada elemen sebaris atau elemen blok sebaris dan hanya digunakan pada senario teks berpusat menegak.

Ringkasan

Di atas memperkenalkan beberapa kaedah CSS biasa untuk mencapai pemusatan menegak Kaedah yang berbeza sesuai untuk senario yang berbeza dan perlu dipilih mengikut keperluan sebenar. Juga ambil perhatian bahawa kadangkala gabungan kaedah mungkin diperlukan untuk mencapai pemusatan menegak. Saya harap artikel ini dapat membantu anda mencapai pemusatan menegak dengan lebih mudah.

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