Html 如何使左浮动元素居中？

我有一个不同宽度的容器，里面漂浮着不同数量的盒子。所有框都具有相同的

宽度

和

高度

这是一个示范。

我正在寻找纯CSS解决方案，如果可能的话。否则，纯javascript（无jQuery）和CSS解决方案就可以了

这个例子可以很好地处理一行浮动框，但不能处理多行，这不是我想要的。

---

使用

显示
内联块
而不是使用
浮动
左
，并在父
div
中添加
文本对齐
居中
，这将使
容器中的框居中


HTML

不要使用
float
left
，而是使用
display
内联块
，并在父
div
中添加
文本对齐
居中
，这将使
容器中的框居中


HTML

这不会像我想要的那样起作用。如果我总共有6个框，第1行有4个框，第2行有2个框，我希望框5和6放在框1和框2的正下方，使用“左浮动”和“从左到右设置边距”来调整。如何设置正确的边距？容器的宽度未知。这将无法正常工作。如果我总共有6个框，第1行有4个框，第2行有2个框，我希望框5和6放在框1和框2的正下方，使用“左浮动”和“从左到右设置边距”来调整。如何设置正确的边距？容器的宽度未知。这在纯CSS中是可能的，但您必须使用大量媒体查询：@Danield谢谢！最后，使用纯CSS是可行的，但你必须使用大量的媒体查询：@Danield谢谢！终于有办法了
<div class="container">
 <div class="">
   <div class="box">1</div>
   <div class="box">2</div>
   <div class="box">3</div>
   <div class="box">4</div>
   <div class="box">5</div>
   <div class="box">6</div>
   <div class="clear"></div>
 </div>
</div>

.container {
   border: 1px solid red;
   width: 480px; text-align:center;
 }

  .container.wider {
    width: 530px;
  }

 .box {
   float: none;
   width: 80px;
   height: 80px;
   margin: 10px;
   background-color: #ddd;
   display:inline-block;
   }