CSS垂直居中方法用法介绍

本文将从多个方面对CSS垂直居中方法进行详细阐述，涵盖多种实现方法及其适用场景。

一、Flex布局方法

Flex布局可以说是CSS中实现垂直居中最为优雅的方式，其实现方式非常简单易懂。

.parent {
  display: flex;
  align-items: center; /* 垂直居中 */
}

只需要父容器设置display属性为flex，再设置align-items属性为center就可以实现了。

特别地，如果要实现水平居中也非常简单，只需要设置justify-content属性为center即可实现。

定位方法是一种常见的垂直居中方法，其实现可以利用绝对定位，通过设置top和transform属性来实现。

.parent {
  position: relative;
}
.child {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

通过设置子元素为绝对定位，父容器为相对定位，然后将子元素的top属性设置为50%，以及transform属性的translateY(-50%)来实现垂直居中。

需要注意的是，定位方法要求子元素的高度已知，不适用于高度动态变化的情况。

表格方法是CSS中一种非常易用的垂直居中方式，在处理一些特定场景下非常实用。

.parent {
  display: table;
  height: 200px;
}
.child {
  display: table-cell;
  vertical-align: middle;
}

只需要将父元素的display属性设置为table，子元素的display属性设置为table-cell，再设置子元素的vertical-align属性为middle即可实现垂直居中。

需要注意的是，表格方法只适用于已知高度的元素，如果高度不确定，会导致布局混乱。

计算方法是一种基于自身属性的垂直居中方式，可以应用于各种不同高度的元素上。

.parent {
  position: relative;
}
.child {
  position: absolute;
  top: 50%;
  margin-top: -25px; /* 半个高度 */
  height: 50px;
}

计算方法的实现方式是将子元素的top属性设置为50%，即将子元素的上边缘定位到父元素的中心点，然后再设置margin-top属性为子元素高度一半的负值，以此将子元素中心对齐到父元素中心。

inline-block方法是一种基于元素内部特性的垂直居中方式，可以应用于inline-block或table-cell元素。

.parent {
  font-size: 0;
  text-align: center;
}
.child {
  display: inline-block;
  vertical-align: middle;
  font-size: 16px; /* 恢复字号 */
}

inline-block方法的实现方式是通过设置父容器的font-size属性为0来消除与子元素之间的空格，然后将子元素的display属性设置为inline-block来实现同行排列，并设置子元素的vertical-align属性为middle来实现垂直居中。

本文详细阐述了CSS中实现垂直居中的多种方式，包括Flex布局、定位方法、表格方法、计算方法以及inline-block方法，可以根据实际情况选择适合的方式进行布局。

展开阅读全文