如何将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;
}