body 设置 flex 后，item 无法上下居中？
问题描述：
在 HTML 中，
的子元素
可以通过
的 flex 属性实现上下左右居中。但是，当 body 设置 flex 属性后，
无法垂直居中。
原因分析：
撑起了 的高度时， 的 flex 属性就失效了。
解决办法：
为了解决此问题，我们需要创建一个具有固定高度的辅助容器来将
包裹起来。例如：
内容
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;
}通过这种方式，
提供了 所需的高度，从而使
可以垂直居中。
