标签导航：

为什么body上使用Flex布局无法实现子元素垂直居中？

flex 布局应用于 body 元素时，子元素垂直居中失效的原因分析

在使用 Flex 布局时，开发者经常会遇到一些问题，例如：将 Flex 布局应用于 body 元素后，子元素无法实现垂直居中。本文将分析此问题。

问题描述：一个包含 inner 元素的 outer 元素，通过设置 outer 元素的 display: flex、align-items: center 和 justify-content: center，可以轻松实现 inner 元素的居中。但是，将相同的 Flex 布局应用于 body 元素时，却无法达到预期的效果。

示例代码：

<div class="outer">
  <div class="inner">内容</div>
</div>
.outer {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 500px;
  height: 300px;
  border: 2px solid red;
}

.inner {
  width: 100px;
  height: 100px;
  text-align: center;
  border: 1px solid black;
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
}

代码中，.outer 能成功居中 .inner，但将 display: flex 应用于 body 后，.outer 却无法垂直居中。

原因分析：align-items: center 需要一个明确的高度才能使垂直居中生效。body 元素的高度通常由其内容决定，如果没有明确设置高度，align-items: center 就无法发挥作用。justify-content: center 则可以使 .outer 水平居中，因为浏览器窗口的宽度提供了水平方向上的尺寸参考。

因此，即使 body 设置了 display: flex、align-items: center 和 justify-content: center，由于 body 自身高度未定义，.outer 也无法垂直居中。 解决方法是为 body 设置一个固定高度，或者使用其他布局方法来确保 body 有一个明确的高度。