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 有一个明确的高度。
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告![ThinkPHP5快速开发企业站点[全程实录]](https://img.php.cn/upload/course/000/000/068/6253d918a3ce7278.png)
收藏
收藏
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
1022
