使用 flex 布局时，如何在 body 标签内实现元素垂直居中？

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 标签内实现元素垂直居中？的详细内容，更多请关注其它相关文章！