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"> 可以垂直居中。