css - 在容器内居中 div

Question

我有多个较小的固定大小的 div float 在容器 div 中。我希望它们等距分布，以便整个 block 给人以居中对齐的印象。

Right now they are aligned to the left (这就是 float 的工作原理，我知道)。我知道这不太可能，但我只是想要一些 hack，这样我就可以实现同样的目标。

One way to do that是计算必要的宽度(假设我每行需要 3 个 div，每个 100px 宽，10px 边距。因此容器的总宽度应为 100*3+60)并将该宽度应用于容器 div 并设置边距自动。

#container {
    width: 360px;
    margin: 0px auto;
}
.items { /* these are smaller divs */
    width: 100px;
    margin: 10px;
    float: left;
}

但这在不同的屏幕尺寸下看起来不太好，除非我专门为不同的媒体设置宽度。

Another way is to use the flex display .

#container {
    display: flex;
    flex-wrap:wrap;
    justify-content: space-between;
}
.items { /* these are smaller divs */
    flex: 0 0 auto;
    width: 100px;
    margin: 10px;
}

它几乎达到了我的目的，但问题是当你在底行有多个 div 时，它只是将第二个 div 放在最右边，而不是在第二列下对齐(这也是我知道的预期行为，没有任何问题)。

那么，对于我想要实现的目标，有什么技巧/技巧吗？

更新(针对重复报告):另一个问题的解决方案(报告与此问题相同)使用固定容器宽度，而我在上面提到我不想固定容器宽度。所以那个解决方案不是我要找的。

下面 Josh 提到了完美的解决方案，只更改了 justify-content: space-around，这样即使窗口变窄，内容也能保持居中。

Answer 1

So, are there any tricks/hacks for what I want to achieve?

这绝对是一个 hack，但它似乎有效。您可以添加一些 height 为 0 的空 flexbox 元素作为占位符。这样做时，将按预期计算 flexbox 元素放置，因为将考虑空 flexbox 元素的宽度并填充空间。

空 flexbox 元素的最小数量应该等于一行中 flexbox 元素的最大数量减一。当然，您可以随时添加更多……以防万一。

在下面的示例中，我使用了 :empty pseudo class选择空的占位符 flexbox 元素。

Updated Example

相关的CSS:

.items:empty {
  visibility: hidden;
  height: 0;
  width: 100px;
  margin: 0 10px 0;
}

完整的 HTML/CSS:

#container {
  background-color: #000;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  margin: 25px auto;
}
.items {
  flex: 0 0 auto;
  width: 100px;
  margin: 10px;
}
#item1 {
  background-color: #F00;
}
#item2 {
  background-color: #0F0;
}
#item3 {
  background-color: #00F;
}
#item4 {
  background-color: #ABC;
}
#item5 {
  background-color: #A00;
}
#item6 {
  background-color: #6AF;
}
#item7 {
  background-color: #07A;
}
#item8 {
  background-color: #A79;
}
#item9 {
  background-color: #AF4;
}
#item10 {
  background-color: #FF4;
}
.items:empty {
  visibility: hidden;
  height: 0;
  width: 100px;
  margin: 10px;
  margin-top: 0;
  margin-bottom: 0;
}

<div id="container">
    <div id="item1" class="items">a</div>
    <div id="item2" class="items">b</div>
    <div id="item3" class="items">c</div>
    <div id="item4" class="items">c</div>
    <div id="item5" class="items">c</div>
    <div id="item6" class="items">c</div>
    <div id="item7" class="items">c</div>
    <div id="item8" class="items">c</div>
    <div id="item9" class="items">c</div>
    <div id="item10" class="items">c</div>
    <div class="items"></div><div class="items"></div><div class="items"></div><div class="items"></div><div class="items"></div><div class="items"></div><div class="items"></div><div class="items"></div><div class="items"></div>
</div>