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

本篇文章向大家介绍《如何让使用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;
}

今天关于《如何让使用flex布局的div元素在页面上下左右居中？ 》的内容介绍就到此结束，如果有什么疑问或者建议，可以在golang学习网公众号下多多回复交流；文中若有不正之处，也希望回复留言以告知！