CSS 垂直居中

在网页中，我们经常需要对元素进行垂直居中的处理，本文将介绍几种实现垂直居中的方法，帮助你更好地掌握 CSS 布局的技能。

1. 使用 flexbox

在 CSS3 中引入 flexbox 布局，它是一种非常强大的布局方式。通过设置容器的 display 属性为 flex，然后再设置容器内元素的 align-items 和 justify-content 属性即可实现元素的垂直居中。

.container {
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
}

2. 使用 table 和 table-cell

另一种常用的实现垂直居中的方法是使用表格布局。我们可以将父容器设置为表格，将子元素设置为表格单元格，然后使用 vertical-align 属性进行垂直居中。

.container {
  display: table;
}
.child {
  display: table-cell;
  vertical-align: middle; /* 垂直居中 */
}

3. 使用 position 和 transform

我们可以使用绝对定位和 transform 属性使元素水平垂直居中。

首先，将父元素设置为相对定位，然后将子元素设为绝对定位。接着，使用 top: 50% 和 left: 50% 让元素的左上角位于父元素的中心点。最后使用 transform: translate(-50%, -50%) 来把元素向左上方移动自身宽度和高度的一半，从而使其完全居中。

.container {
  position: relative;
}
.child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* 水平垂直居中 */
}

4. 使用 line-height

对于一行文本，我们可以使用 line-height 来实现文本的垂直居中。

.container {
  line-height: 100px; /* 不同元素的高度需要设置不同的值 */
  height: 100px; /* 需要设置高度 */
}

以上是几种常用的 CSS 垂直居中方式，你可以根据实际使用场景进行选择。