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

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

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

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

  

• 第 7 种方法适用于，在一个容器内水平垂直置中一行文字，画面如下：

  

如果想练习更多前端面试题目，推荐可以到 GreatFrontEnd 上练习

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

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

1. 使用 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

2. 使用 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;
}

3. 透过 margin-inline 来置中

除了搭配 display:flex，margin 还有其他搭配方式。只要把 margin-left 跟 margin-right 都设定成 auto，这样意味着，会把左边与右边都有的空间都变成 margin，这样就会把元素往正中间挤。注意，这边要搭配 max-width: fit-content 来确保元素的水平会固定在元素的宽度，不会往水平拉长。

.element {
  max-width: fit-content;
  margin-left: auto;
  margin-right: auto;
}

另外 CSS 有一个 margin-inline 可以使用，它会等同于同时设定 margin-left 与 margin-left，因此上面的 CSS 可以改写成下面这样

.element {
  max-width: fit-content;
  margin-inline: auto;
}

4 . 使用 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 容器中的所有元素都水平置中并垂直置中对齐的效果。

5. 使用 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% 将元素平移回其中心位置，从而使元素完全置中对齐。

6. 在浏览器视窗置中

除了针对元素与其父元素，我们很常会需要直接在浏览器视窗的可视范围置中，例如常见的固定在浏览器某个位置的横幅 (banner)，可以用以下方法

.element {
  position: fixed;
  inset: 0px;
  margin: auto;
}

透过 position: fixed 我们可以将元素固定在视窗中，而 inset: 0px 则是设定上下左右都为 0，这样会把整个元素拉到全画面，这时候再搭配 　margin: auto 就能让元素置中。

7. 使用 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 有什么值和作用？