html - 对齐留在父级的 div

Question

我有以下要求。

绿色父级宽度将根据设备宽度而变化。我需要所有的盒子都在 parent 的中心。

我已经尝试过以下方法，但对我没有帮助。

试验 1
父{text-align:center} 框{display:inline-block}。

这导致了以下输出

试验 2
父{text-align:center} 框{float:left}。

这导致了以下输出

试验 3
Parent {display:flex} box -> justify-around & justify-between 也没有用。

.parent {
  text-align: center;
}
.item {
  display: inline-block;
  width: 100px;
  height: 100px;
  background: red;
}

<div class="parent">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

我们将不胜感激。

Answer 1

如果没有 Javascript，这很难使用 float 和/或内联 block 。

Flexbox 提供了一些希望，但即便如此，也需要一些创造力。

本质上，如果已知“每行”的最大元素数，您可以创建所需数量的不可见元素，这些元素可以与 justify-content:center 结合使用以实现最后一行通过将最后一行内容推回左侧来实现您所需的外观。

Codepen Demo

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.parent {
  text-align: center;
  border: 1px solid grey;
  width: 80%;
  max-width: 800px;
  margin: 1em auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.item {
  width: 100px;
  height: 100px;
  margin: 10px;
  background: red;
}
.balancer {
  height: 0;
  width: 100px;
  margin: 0 10px;
  visibility: hidden;
}

<div class="parent">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="balancer"></div>
  <div class="balancer"></div>
  <div class="balancer"></div>
  <div class="balancer"></div>

</div>