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

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是唯一的方法，那么我很乐意看到它的实际效果。