如何让使用flex布局的div元素在页面上下左右居中？

疑惑解答：body设置flex无法让item上下左右居中

当我们对body设置flex时，并不能直接让item（如div.outer）实现上下左右居中。

首先，你提供的代码中，.body的写法有误，应该是body。

纠正后，body设置flex可以实现div.outer水平居中，但无法。这是因为

本身没有高度，其高度是由div.outer撑起的。因此，要让div.outer实现上下居中，需要额外设置一个带有固定高度的div来包裹它，如：

<div class="wrapper">
  <div class="outer">
    内容
  </div>
</div>

登录后复制

并对wrapper设置flex垂直居中属性：

.wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 500px;
}

登录后复制

以上就是如何让使用的div元素在页面上下左右居中？的详细内容，更多请关注米云其它相关文章！