元素的流体网格居中，无需在父级上设置硬宽度

我想将元素的“网格”居中，当调整大小时，该元素会调整到自身居中。

像这样：

 ___________________
|                   |
|    [] [] [] []    |
|    [] [] [] []    |
|    [] [] []       |
 -------------------
 ________________
|                |
|    [] [] []    |
|    [] [] []    |
|    [] [] []    |
|    [] []       |
 ----------------
 _____________
|             |
|    [] []    |
|    [] []    |
|    [] []    |
|    [] []    |
|    [] []    |
|    []       |
 -------------

我尝试过设置一个max-width，但这会在调整大小时导致此问题：

 ________________
|                |
|    [] [] []    |
|    [] [] []    |
|    [] [] []    |
|    [] []       |
 ----------------
 _____________
|             |
| [] []       |
| [] []       |
| [] []       |
| [] []       |
| [] []       |
| []          |
 -------------

我不考虑使用媒体查询并设置硬性widths（甚至max-widths）对于每个配置都有一个真正的解决方案。

我对 CSS3 持开放态度，只要它能够优雅地降级，并且希望避免使用 javascript。

Edit:添加非语义元素也是一个交易破坏者，一个容器div或者有些东西还可以，但不理想。

标记应如下所示：

 <ul>
      <li>...</li>
      <li>...</li>
      <li>...</li>
 </ul>

这里有一个demo让您开始。

谢谢。

对于居中的确切要求仍然有点模糊（例如，上面的所有插图都显示偶数个元素，所以我不知道您对奇数的期望。在您的小提琴中，我刚刚添加了一个text-align: center to the ul并达到了居中效果（http://jsfiddle.net/nR9Mk/1/），但我不知道它的行为是否如您所愿。

Update：如果您只处理偶数并且希望它们保持按两位分组，那么这将起作用：http://jsfiddle.net/nR9Mk/8/.

ROUND 2：根据您透露的“奇数”要求，我想出了一个可行的解决方案。注意：1）它确实需要一些额外的 HTML 标记，2）您必须设置某种类型的实际限制来限制您想要的宽度并仍然获得效果。Here是带有“buffer”元素的代码，由outline and here是去掉轮廓的吗？

ROUND 3：我知道您已经接受了我的答案，但我已经在研究这个问题了，所以我想无论如何我都会提供它。根据您破坏交易的评论，这是修改后的计划这可能对您（或其他人）有用。它是一种混合体——“有时”它将元素向左推（通常是在不这样做最尴尬的时候），有时让它们保持“偏离列”但居中。为了防止它看起来很“奇怪”，它被赋予了一个max-width六列宽。