如何将div网格居中？

Question

为了详细描述问题，我必须做出一些假设：

1. 我有一个项目列表，其长度未知（可以是1,2或甚至50）
2. 我想在网格中显示它们 - 连续的项目数是未知的（由用户的显示分辨率决定）。
3. 每个项目的宽度都相同，并且固定为250px。
4. 项目间距应根据显示分辨率确定，否则容器的宽度应缩小。
5. 我不想要使用JS。

您可以在FoodGawker看到我想要做的确切内容。我正在使用2台不同分辨率的显示器。当我将浏览器从一个拖放到另一个时，它只会将更多项目放在一行中，但所有内容仍然是居中和对称的。它也适用于JS禁用。

所以我知道这是可能的，我不知道该怎么做。

我尝试了很多浮动：，显示：等等，但无法使其正常工作。

下面的代码与我想要的最接近 - 适用于2个内部div，但对于很多人来说，它不再是居中的。有什么想法吗？

.center_wrapper {
    background: grey;
    padding: 10px;
    text-align: left;
    overflow: hidden; 
    display:inline-block;
}

.cards_wrapper {
    background: red;
    overflow: hidden; 
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    width: 90%;

}
.card {
    background: blue;
    width: 250px;
    height: 250px;
    margin: auto 20px;
    display:inline;
}


<div class="cards_wrapper">
    <div class="center_wrapper">
        <div class="card">
            <img src="./Index - My ASP.NET MVC Application_files/noImageAvailable.png">
        </div>
        <div class="card">
            <img src="./Index - My ASP.NET MVC Application_files/noImageAvailable.png">
        </div>
    </div>
</div>

Answer 1

使用inline-block和％margin

演示：http://jsfiddle.net/MadLittleMods/9SZDC/

.block
{
    display: -moz-inline-stack;
    display: inline-block;
    vertical-align: top;
    zoom: 1;
    *display: inline;

    width: 250px;
    height: 100px;
    background: #aaeeff;

    margin: 1%;
}​

如果要使块居中，则可以向容器添加text-align

.container
{
    text-align: center;
}

Answer 2

从text-align: left;中移除.center_wrapper应该可以解决问题。

见here。