Html 除了最后一行缩略图外，如何在响应性网页设计中居中？

当我开始在stackoverflow上发帖时，我从来没有想过我会问一个关于简单HTML布局的问题，但这是我今天的一份谦虚的蛋糕

在这把小提琴中：

缩略图在页面中居中，与页面宽度无关，这是我想要的，但最后一行（不完整的）缩略图也居中，这是我不想要的。我希望最后一行与其他行在左侧齐平，右侧空白

在这把小提琴中：

最后一行与其他行齐平，右边有空格，这是我想要的，但整批缩略图的中心偏左，这取决于窗口的宽度，我不想要

那么，我怎么能简单地让整批缩略图完全居中，但底部一行与其余部分齐平？我在所有大写字母中都说“简单”，因为（1）使用一系列媒体查询来改变屏幕宽度和（2）使用JavaScript将n个虚拟缩略图放在行的末尾，其中n=（缩略图总数）%（一行中的缩略图数量）的丑陋而复杂的解决方案出现在我身上，但这些解决方案既丑陋又复杂

缩略图的数量会有所不同，但我知道。我还知道缩略图的宽度。（它们的尺寸都一样。）

---

一定有一些CSS我没有想到，我可以使用…

Flexbox可以解决您的问题，没有JS，只有CSS3

请参见codepen上的结果：

HTML:

<ul class="flex-container">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
</ul>

}

---

您可以在此处看到完整的教程：

重复：您可以在Tumbnail周围添加一个额外的div，并将其居中。然后在那个div里面，你把所有的东西都向左推，就像第二个一样fiddle@PeteTNT：的确如此。对不起，我在发布之前做了搜索！标题在这个问题上也更加精确（我将尝试JavaScript解决方案。

<ul class="flex-container">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
</ul>

ul.flex-container {
    width: 60%;
    padding: 0;
    margin: 0 auto;
    list-style: none;

    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;

    -webkit-flex-flow: row wrap;
    justify-content: flex-start;

ul.flex-container li {
    background: tomato;
    padding: 5px;
    margin: 5px;
    width: 200px;
    height: 150px;
    margin-top: 10px;

    line-height: 150px;
    color: white;
    font-weight: bold;
    font-size: 3em;
    text-align: center;
}