CSS 水平垂直置中的方法 (flex, grid)

将元素置中基本上是 CSS 面试题中的基本题，面试官基本上会从面试者回答的方式和内容来判断对于 CSS 排版的熟悉程度。但元素置中的做法其实有非常多种，不需要到每一种都要会，但建议可以熟练几种自己最擅长的作法。

本篇文章会介绍其中五种方法。

第 1 ~ 第 4 种方法适用于，在一个容器内水平垂直置中一个 div 元素，画面如下：
水平垂直置中一个 div 元素
第 5 种方法适用于，在一个容器内水平垂直置中一行文字，画面如下：
水平垂直置中一行文字

CSS 水平垂直置中的 5 种方法

以下我们来看这五种方法的实作和讲解：

使用 display: flex + align-items: center + justify-content: center
- 将父层元素 display 设置为 flex
- 设置 align-items 属性为 center，表示在父层元素中将子元素垂直对齐到中间
- 设置 justify-content 属性为 center，表示在父层元素中将剩余空间均分在子元素的两侧，将子元素水平对齐到中间

<div class="outside">
  <div class="inside">inside</div>
</div>

.outside {
  width: 400px;
  height: 400px;
  background-color: #ccc;
  display: flex;
  align-items: center;
  justify-content: center;
}

.inside {
  background-color: pink;
  height: 200px;
  width: 200px;
}v

使用 display: flex 和 margin: auto
- 将父层元素 display 设置为 flex
- 将子元素 margin 设置为 auto，将子元素水平垂直对齐到中间

<div class="outside">
  <div class="inside">inside</div>
</div>

.outside {
  width: 400px;
  height: 400px;
  background-color: #ccc;
  display: flex;
}

.inside {
  background-color: pink;
  height: 200px;
  width: 200px;
  margin: auto;
}

使用 display: grid + place-content: center
- 将父层元素 display 设置为 grid
- 在父层元素中使用 place-content 属性，将其值设置为 center，它将在水平和垂直方向上置中其子元素

<div class="outside">
  <div class="inside">inside</div>
</div>

.outside {
  display: grid;
  place-content: center;
}

补充说明

place-content: center 实际上等同于同时将 grid 容器的 justify-content 和 align-content 设置为 center。 justify-content 属性控制了水平对齐，而 align-content 属性控制了垂直对齐。所以，通过将 justify-content 和 align-content 同时设置为 center，可以实现将 grid 容器中的所有元素都水平置中并垂直置中对齐的效果。

使用 position: absolute + top: 50% + left: 50% + transform: translate(-50%, -50%)
- 设置父层元素为 position: relative，方便计算子元素的相对位置
- 设置子元素为 position: absolute，它会相对于最近的已定位的父层元素进行定位
- 设置 top 属性为 50%，将子元素的上边缘移到父层元素正中间的位置
- 设置 left 属性为 50%，将子元素的左边缘移到父层元素正中间的位置
- 设置 transform: translate(-50%, -50%)，将子元素向左上方移动 50% 的距离，使其垂直和水平置中对齐

<div class="outside">
  <div class="inside">inside</div>
</div>

.outside {
  width: 400px;
  height: 400px;
  background-color: #ccc;
  position: relative;
}

.inside {
  background-color: pink;
  height: 200px;
  width: 200px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

补充说明

position: absolute 的用法建议参考这篇说明。简而言之，当一个元素的 position 设置为 absolute 时，它会相对于最近的已定位的父层元素进行定位。

而 transform: translate(-50%, -50%) 是 CSS 中的变换属性，用于对元素进行平移。它的作用是将元素在水平方向上平移自身宽度的 50%，在垂直方向上平移自身高度的 50%。

由于我们将元素的 top 和 left 设置为 50%，元素的中心点已经在父元素的中心位置了。但是，由于元素的默认对齐方式是左上角，所以元素的左上角与父元素的中心重合。因此，我们通过使用transform: translate(-50%, -50% 将元素平移回其中心位置，从而使元素完全置中对齐。

使用 text-align: center + line-height
- 设置父层元素为 text-align: center，使文字水平置中
- 设置子层元素 line-height 与父元素同高，使文字在元素中垂直置中

<div class="outside">
  <div class="inside">inside</div>
</div>

.outside {
  width: 400px;
  height: 400px;
  background-color: #ccc;
  text-align: center;
}

.inside {
  background-color: pink;
  line-height: 400px;
}

请解释 CSS position 有什么值和作用？

CSS 水平垂直置中的 5 种方法

相关文章