Eu tenho um monte de blocos do mesmo tamanho definido paradisplay:inline-block dentro de um div que temtext-align:center definido para alinhar os blocos.

|        _____   _____   _____   _____       |
|       |     | |     | |     | |     |      |
|       |  1  | |  2  | |  3  | |  4  |      |
|       |_____| |_____| |_____| |_____|      |
|        _____   _____   _____   _____       |
|       |     | |     | |     | |     |      |
|       |  5  | |  6  | |  7  | |  8  |      |
|       |_____| |_____| |_____| |_____|      |
|                                            |

Os blocos preenchem o div horizontalmente e, à medida que a janela do navegador diminui, alguns blocos quebram em novas linhas, criando mais linhas e menos colunas. Eu quero que tudo continue centralizado, com a última linha alinhada à esquerda, assim:

|        _____   _____   _____        |
|       |     | |     | |     |       |
|       |  1  | |  2  | |  3  |       |
|       |_____| |_____| |_____|       |
|        _____   _____   _____        |
|       |     | |     | |     |       |
|       |  4  | |  5  | |  6  |       |
|       |_____| |_____| |_____|       |
|        _____   _____                |
|       |     | |     |               |
|       |  7  | |  8  |               |
|       |_____| |_____|               |
|                                     |

O que acontece atualmente é isto:

|        _____   _____   _____        |
|       |     | |     | |     |       |
|       |  1  | |  2  | |  3  |       |
|       |_____| |_____| |_____|       |
|        _____   _____   _____        |
|       |     | |     | |     |       |
|       |  4  | |  5  | |  6  |       |
|       |_____| |_____| |_____|       |
|            _____   _____            |
|           |     | |     |           |
|           |  7  | |  8  |           |
|           |_____| |_____|           |
|                                     |

Não consigo adicionar divs de preenchimento extra como uma sugestão, porque pode haver vários blocos e a quantidade de linhas e colunas varia dependendo da largura do navegador. Eu também não posso estilizar o bloco # 7 diretamente, pelo mesmo motivo. Os blocosdeve sempre permanecer centrado não importa quantas colunas.

Aqui está uma caneta para demonstrar melhor:

http://codepen.io/anon/pen/IDsxn

Isso é possível? Eu sinto que deveria ser. Eu preferiria não usar o flexbox, pois é apenas ie10 +, e gostaria de ie9 +. Eu realmente gostaria de uma solução CSS pura, mas se você me disser que JS é o único caminho, eu adoraria ver isso em ação.

Para referência - questões semelhantes, embora nenhuma tenha sido completamente explicada:

Como alinhar a última linha / linha esquerda em várias linhas flexbox

CSS - Esquerda alinha a última linha de imagens em um div centralizado

Corrigir centrando a última linha de elementos na grade do recipiente de fluido a ser alinhado à esquerda enquanto o recipiente permanece centralizado

Centralize vários blocos inline com CSS e alinhe a última linha à esquerda