Html 带浮动子对象的中心父div

我正在尝试创建一个响应网格。我有一个“parent”div，其中包含浮动的子对象。根据页面宽度，每个“行”显示可变数量的子项。孩子们应该居中

为了使“parent”div适合子级，我在parent div上设置了

display:table

请看下面的小提琴：

css:

html:

O1
A.
B
C
D

示例O1按预期工作。然而，我希望它能与更多的流动儿童合作

示例O2：如果我在一行子项后手动插入一个

clear:both

，则此选项有效。这当然会破坏布局的响应性

如果我省略了“clear”（清除），它将不再起作用，结果是O3。父div变得太宽，子div不再居中

---

有没有一种方法可以在保持响应行为的同时获得示例O2行为？

使用CSS3，您可以从#5:

浏览器支持并不可怕：

---

我用叉子拨弄你的小提琴：

使用CSS3，你可以从第五点开始清除每四个

.Child

浏览器支持并不可怕：

---

我把你的小提琴分叉了：

在你的解决方案中，我仍然需要指定每行的子项数。我正在寻找一种解决方案，其中每行的子项数由浏览器决定。在您的解决方案中，我仍然需要指定每行的子项数。我正在寻找一种解决方案，其中每行的子项数量由浏览器决定。我找到的解决方案是父项获得一个

text align:center。孩子们得到了一个
显示：内联块
而不是
浮点：左
。我找到了解决方案，家长们得到了一个
文本对齐：中心。孩子们得到一个
显示：内联块
，而不是
浮动：左
。
.page {
    background: #a00;
    width:700px;
    margin: 20px;
}
.Parent {
    background: #ccc;
    border: 1px solid black;
    display: table;
    margin-left: auto;
    margin-right:auto;
}
.Child {
    float: left;
    width: 150px;
    height: 50px;
    background:red;
    margin: 5px;
}
.br {
    clear: both;
}

<div class='page'>O1
<div class="Parent">
    <div class="Child">a</div>
    <div class="Child">b</div>
    <div class="Child">c</div>
    <div class="Child">d</div>
</div>

div.Child:nth-child(4n+5){
    clear: both;
    background-color: #ddf;
}