如何水平居中flex <div>？

Question

那么水平居中flex <div> 的正确方法是什么？

#container {
  width: 100%;
  min-height: 100%;
}

<div id="container">
  <div className="horizontal-centered">Center this</div>
</div>

- user3259472

---

这是一个错别字吗？className。它应该是class吗？ - Rohit

Answer 1

首先将className改为class。 将.horizontal-centered应用justify-content:center;

<div id="container">
  <div class="horizontal-centered">...</div>
</div>

#container .horizontal-centered {
  flex-wrap: wrap;
  display: flex;
  flex-direction: row;
  margin: 0;
  justify-content: center;
}

- jotavejv

---

抱歉如果有误解，但我正在尝试水平居中具有固定宽度的实际<div class="horizontal-centered">。 - user3259472

Answer 2

假设一些事情： 1）“className”是一个打字错误，应该是class？ 2）“.horizontal-centered”是需要居中的项目，而不是flexbox本身。

这里需要进行的flexbox更改完全在容器中。它假定直接子项是flex项。以下是更改内容。

#container {
  width: 100%;
  min-height: 100%;
  background-color:black;
  height:200px;
  display:flex;
  justify-content:center;
}

#container .horizontal-centered {
  height:50px;
  width:50px;
  background-color: #333;
  
}

 <div id="container">
      <div class="horizontal-centered">...</div>
  </div>

- nvrwithoutacause

Answer 3

将文本在容器中居中对齐：

#container {
  width: 100%;
  min-height: 100%;
  text-align: center;
}

然后确保您的水平边距设置为auto，并且容器文本正确地重新对齐。

#container .horizontal-centered {
  flex-wrap: wrap;
  display: flex;
  flex-direction: row;
  margin: 0 auto;
  text-align: left;
}

- Ragdoll

Answer 4

尝试这个。

#container {
  width: 100%;
  min-height: 100%;
   padding: 0;
    margin: 0;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    align-items: center;
    justify-content: center;
}

<div id="container">
  <div className="horizontal-centered">Center this</div>
</div>

- Byron

Answer 5

要水平居中最外层块，例如 div 或 article，请在类或样式属性中使用以下 CSS，可以在 body 或周围的 div 上使用：

display: flex; justify-content: center;

如此简单。

- David Spector