Question

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

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

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

Answer 1

试试这个

＆＃13;

<script src="https://d3js.org/d3.v4.min.js"></script>

＆＃13;

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

＆＃13;

Answer 2

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

此处所需的flexbox更改完全在容器中。它假定直接孩子是弹性项目。更改如下所示。

#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>

Answer 3

居中对齐容器中的文字：

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

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

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

Answer 4

首先将className更改为class。将justify-content: center;应用于.horizontal-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;
}

Answer 5

要将最外面的块（例如 div 或文章）水平居中，请在 class 或 style 属性中使用以下 CSS，在正文或周围的 div 上：

显示：弹性；对齐内容：居中；

就这么简单。

如何水平居中flex <div>？

5 个答案: