html - 如何水平居中 flex ？

Question

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

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

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

Answer 1

首先把className改成class。将 justify-content: center; 应用于 .horizo​​ntal-centered

<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;
}