body 设置 flex 后，item 无法上下居中？
问题描述：
在 HTML 中，
的子元素 可以通过 的 flex 属性实现上下左右居中。但是，当 body 设置 flex 属性后， 无法 。
原因分析：
的 flex 属性无效，因为它是一个没有明确高度的容器，高度受其子元素控制。当 撑起了 的高度时， 的 flex 属性就失效了。
解决办法：
为了解决此问题，我们需要创建一个具有固定高度的辅助容器来将
包裹起来。例如：
<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;
}
登录后复制
通过这种方式，
提供了 所需的高度，从而使 可以垂直居中。
以上就是使用 flex 布局时，如何在 body 标签内实现元素？的详细内容，更多请关注GTHOST其它相关文章！
