元素居中网格中的最后一行左对齐

Question

我display:inline-block在div中text-align:center设置了一堆相同大小的块，该div 设置为对齐块。|        _____   _____   _____   _____       ||       |     | |     | |     | |     |      ||       |  1  | |  2  | |  3  | |  4  |      ||       |_____| |_____| |_____| |_____|      ||        _____   _____   _____   _____       ||       |     | |     | |     | |     |      ||       |  5  | |  6  | |  7  | |  8  |      ||       |_____| |_____| |_____| |_____|      ||                                            |这些块会水平填充div，并且随着浏览器窗口的缩小，一些块会换行，从而创建更多的行和更少的列。我希望所有内容仍保持居中，最后一行对齐到左侧，如下所示：|        _____   _____   _____        ||       |     | |     | |     |       ||       |  1  | |  2  | |  3  |       ||       |_____| |_____| |_____|       ||        _____   _____   _____        ||       |     | |     | |     |       ||       |  4  | |  5  | |  6  |       ||       |_____| |_____| |_____|       ||        _____   _____                ||       |     | |     |               ||       |  7  | |  8  |               ||       |_____| |_____|               ||                                     |当前发生的情况是：|        _____   _____   _____        ||       |     | |     | |     |       ||       |  1  | |  2  | |  3  |       ||       |_____| |_____| |_____|       ||        _____   _____   _____        ||       |     | |     | |     |       ||       |  4  | |  5  | |  6  |       ||       |_____| |_____| |_____|       ||            _____   _____            ||           |     | |     |           ||           |  7  | |  8  |           ||           |_____| |_____|           ||                                     |我不能像一个建议那样添加额外的填充div，因为可以有任意数量的块，并且行和列的数量将根据浏览器的宽度而变化。由于相同的原因，我也不能直接设置第7块的样式。无论有多少列，块都必须始终保持居中。这是一支可以更好地演示的笔：http://codepen.io/anon/pen/IDsxn这可能吗？我觉得肯定应该。我宁愿不要使用flexbox，因为它只有ie10 +，我想使用ie9 +。我真的很想要一个纯CSS解决方案，但是如果您告诉我JS是唯一的方法，那么我很乐意看到它的实际效果。