body 设置 flex 后，item 无法上下居中？
问题描述：
在 HTML 中，<div class="outer"> 的子元素<div class="inner"> 可以通过<div class="outer"> 的 flex 属性实现上下左右居中。但是，当 body 设置 flex 属性后，<div class="outer"> 无法垂直居中。
原因分析：
<body> 的 flex 属性无效，因为它是一个没有明确高度的容器，高度受其子元素控制。当<div class="outer"> 撑起了 <body> 的高度时，<body> 的 flex 属性就失效了。
解决办法：
为了解决此问题，我们需要创建一个具有固定高度的辅助容器来将<div class="outer"> 包裹起来。例如：
<body>
<div class="wrapper">
<div class="outer">
<div class="inner">内容</div>
</div>
</div>
</body>body {
display: flex;
justify-content: center;
}
.wrapper {
height: 500px; // 设置固定高度
}
.outer {
display: flex;
align-items: center;
justify-content: center;
width: 500px;
border: 2px solid red;
}
.inner {
width: 100px;
height: 100px;
text-align: center;
border: 1px solid black;
}通过这种方式，<div class="wrapper"> 提供了<body> 所需的高度，从而使<div class="outer"> 可以垂直居中。
以上就是使用 flex 布局时，如何在 body 标签内实现元素垂直居中？的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
400
收藏
