CSS 文本和div垂直居中方法

在进行网页设计和布局时，我们经常遇到需要将文本或div垂直居中的情况。在CSS中，有多种方法可以实现垂直居中。本文将详细介绍这些方法，并给出示例代码和效果演示。

一、使用行高实现文本垂直居中

行高（line-height）是指每行文字的高度。通过设置行高等于容器的高度，可以使文字在容器中垂直居中。

示例代码如下：

.container {
  height: 200px;
  line-height: 200px;
  text-align: center;
}

效果演示：

二、使用flexbox实现div垂直居中

Flexbox是CSS3中引入的一种弹性布局模型，非常适合于实现垂直居中。通过设置容器的display属性为flex，并设置align-items属性为center，可以实现div元素的垂直居中。

示例代码如下：

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

效果演示：

三、使用position和transform实现div垂直居中

通过设置子元素的position属性为absolute，并使用top和transform属性进行定位，可以实现div元素的垂直居中。

示例代码如下：

.container {
  position: relative;
  height: 200px;
}

.box {
  position: absolute;
  top: 50%;
  transform: translate(0, -50%);
}

效果演示：

四、使用table和table-cell实现div垂直居中

通过将容器设置为display: table，将子元素设置为display: table-cell，并使用vertical-align属性进行对齐，可以实现div元素的垂直居中。

示例代码如下：

.container {
  display: table;
  height: 200px;
}

.box {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}

效果演示：

五、使用transform和absolute实现div垂直居中

通过设置子元素的position属性为absolute，并使用top、left和transform属性进行定位，可以实现div元素的垂直居中。需要注意的是，此方法需要知道子元素的高度。

示例代码如下：

.container {
  position: relative;
  height: 200px;
}

.box {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

效果演示：

结语

本文介绍了常用的实现文本和div垂直居中的方法，包括使用行高、flexbox、position和table等方法。不同的方法适用于不同的场景，可以根据具体情况选择合适的方法。