在另一个div中居中多个div？

Question

我有四个 div 包含在另一个 div 中，我希望四个内部 div 居中。

我在四个 div 上使用了 float: left 以便它们水平对齐。

CSS：

 <style>
    .square  //inner divs
    {
        float: left;
        margin:1pt;
        width:72pt;
        height:72pt;
    }
    .container //outer divs
    {
        text-align:center;
        width:450pt;
        height: 80pt;
    }
</style>

和 HTML：

 <div class = "container">
    <div class = "square">...</div>
    <div class = "square">...</div>
    <div class = "square">...</div>
    <div class = "square">...</div>
</div>

如何将容器内的 div 居中？

内部 div 的数量可以是可变的。

原文由 julienln 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

如果您可以使用额外的 div，这是另一种方法：

 <div class = "container">
  <div class="centerwrapper">
    <div class = "square">...</div>
    <div class = "square">...</div>
    <div class = "square">...</div>
    <div class = "square">...</div>
  </div>
</div>

<style>
    .square
    {
        float: left;
        margin:1pt;
        width:72pt;
        height:72pt;
    }
    .container
    {
        text-align:center;
        width:450pt;
        height: 80pt;
    }
    .centerwrapper
    {
       margin: auto;
       width: 302pt;
    }
</style>

此外，请确保您的 <div class = "container"> 有一个结束报价。您粘贴的代码缺少一个。

原文由 womp 发布，翻译遵循 CC BY-SA 2.5 许可协议

Answer 2

我认为这可能会有所帮助：

 <style>
.container {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    flex-flow: wrap;
}
</style>

原文由 Laurențiu Cozma 发布，翻译遵循 CC BY-SA 4.0 许可协议