如果行不完整，如何将容器中的 <div> 水平居中，同时保持它们向左对齐[重复]答案

【问题标题】：How to horizontally center <div> in container while keeping them aligned to the left if line is incomplete [duplicate]如果行不完整，如何将容器中的 <div> 水平居中，同时保持它们向左对齐[重复]
【发布时间】：2021-03-06 12:34:58
【问题描述】：

如果行不完整，我想将innerContainer 居中在outerContainer 中，同时将多个<div> 保持在innerContainer 中向左对齐。

我还希望容器是流动的并始终保持居中

这样

或者这个

我尝试了使用和不使用flexbox。我对所有提议持开放态度。这是我的代码示例。

即使我将width 放在innerContainer 上，它也不总是居中

.outerContainer {
  display: flex;
  justify-content: center;
  border: 3px solid black;
}

.innerContainer {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  width: 80%; /* Does not stay center in all cases */
  border: 3px solid red;
}

.insideDiv {
  margin: 20px;
  width: 250px;
  min-height: 100px;
  border: 1px solid green;
}

<div class="outerContainer">
  <div class="innerContainer">
    <div class="insideDiv"></div>
    <div class="insideDiv"></div>
    <div class="insideDiv"></div>
    <div class="insideDiv"></div>
    <div class="insideDiv"></div>
    <div class="insideDiv"></div>
    <div class="insideDiv"></div>
    <div class="insideDiv"></div>
    <div class="insideDiv"></div>
    <div class="insideDiv"></div>
    <div class="insideDiv"></div>
    <div class="insideDiv"></div>
  </div>
</div>

谢谢！

【问题讨论】：

你还需要支持IE吗？
@tacoshy 不，我不需要 IE 支持

标签： html css flexbox

【解决方案1】：

您不需要使用flexbox 将block level element 水平居中，例如<div> box。这可以通过在您尝试居中的块元素上使用margin: 0 auto; 轻松完成。

我将您的内箱更改为 display: grid; 我将它与 repeat(auto-fill, minmax(100px, 1fr)); 一起使用我将您的 250px 更改为 100px 用于恶魔启动。该行将尽可能多地容纳该宽度的框，并稍微调整它们的大小，以免浪费空白空间。我还从这些框中删除了该类，并直接使用 CSS 对其进行寻址。

.outerContainer {
  border: 3px solid black;
}

.innerContainer {
  margin: 0 auto;
  width: 80%;
  border: 3px solid red;
  padding: 20px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  grid-gap: 20px;
}

.innerContainer > div {
  min-height: 60px;
  border: 1px solid green;
}

<div class="outerContainer">
  <div class="innerContainer">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </div>
</div>

【讨论】：