前端必备：CSS水平垂直居中详解

前言

想象一下这样的场景：老板的手机收到一个红包，却尴尬地发现红包并没有居中显示。这不禁让人发问，如何让一个子元素在父容器中水平垂直居中？这个问题不仅在面试中常考，在实际开发中也至关重要。

尽管可以轻而易举地写出多种实现方法，但绝大多数人的做法都存在着规范性不足的问题，无法经受推敲。本文将深入探究CSS中的水平垂直居中技巧，提供规范且全面的解决方案。

水平居中

1. 使用text-align: center

最简单的水平居中方法是使用text-align: center属性。该属性的作用是将容器内所有文本内容居中对齐，包括子元素。

.container {
  text-align: center;
}

然而，此方法的局限性在于它仅适用于文本元素。

2. 使用margin: auto

对于非文本元素，可以使用margin: auto属性实现水平居中。margin: auto将子元素的左右外边距都设置为auto，即自动分配剩余空间。

.container {
  display: flex;
  justify-content: center;
}

.child {
  margin: auto;
}

在使用弹性布局（flexbox）的情况下，只需设置父容器的justify-content属性为center即可。

3. 使用网格布局

网格布局（grid）提供了一种更加灵活的方式来控制元素的位置。通过设置网格行的justify-content和网格列的align-content属性，可以轻松实现水平居中。

.container {
  display: grid;
  justify-content: center;
  align-content: center;
}

垂直居中

1. 使用line-height

对于单行文本，可以使用line-height属性实现垂直居中。将line-height设置为容器的高度即可。

.container {
  line-height: 200px;
}

2. 使用transform: translate

对于多行文本或非文本元素，可以使用CSS转换（transform）来垂直居中。translate属性可以将元素在垂直方向上移动。

.container {
  display: flex;
  align-items: center;
}

.child {
  transform: translate(0, -50%);
}

在使用弹性布局的情况下，只需设置父容器的align-items属性为center即可。

3. 使用网格布局

网格布局同样可以用于垂直居中。通过设置网格行的align-content和网格列的justify-self属性，可以实现精准的垂直居中。

.container {
  display: grid;
  align-content: center;
  justify-items: center;
}

综合实现

在实际应用中，经常需要同时实现水平和垂直居中。以下方法可以实现这种效果：

.container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

使用弹性布局创建了一个垂直排列的容器，然后通过justify-content: center和align-items: center分别实现水平和垂直居中。