Html 如何使div网格居中？

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

我有一个项目列表，长度未知（可以是1、2甚至50）

我想在网格中显示它们-行中的项目数未知（由用户的显示分辨率决定）

每个项目的宽度都是相同的，固定为250px

项目间距应根据显示分辨率确定，或缩小容器的宽度

我不想使用JS

你可以清楚地看到我想做什么。我使用了两个不同分辨率的显示器。当我的浏览器从一个拖放到另一个时，它只会在一行中放置更多的项目，但所有内容仍然居中且对称。它也适用于禁用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>

.center\u包装器{
背景：灰色；
填充：10px；
文本对齐：左对齐；
溢出：隐藏；
显示：内联块；
}
.cards_包装{
背景：红色；
溢出：隐藏；
左边距：自动；
右边距：自动；
文本对齐：居中；
宽度：90%；
}
.卡片{
背景：蓝色；
宽度：250px；
高度：250px；
保证金：自动20px；
显示：内联；
}

---

删除

文本对齐：左.center\u wrapper

的code>应该可以实现这一点

---

如图所示。

使用

内联块

和%

边距

演示：

如果要将块居中，则可以向容器添加文本对齐

.container
{
    text-align: center;
}

---

听起来像是flexbox的工作，但浏览器支持不是很好。您可以尝试使用

文本对齐：justify虽然。。
.container
{
    text-align: center;
}