Diversas divs flutuantes centradas em um layout líquido
Tenho uma ideia para um layout que gostaria de usar, mas não consigo que funcione corretamente. Espero que alguém aqui possa ajudar, pois passei horas pesquisando.
O layout é assim.
Uma div de wrapper abriga 6 divs de filhos. Esses divs filhos devem estar centrados emTUDO vezes, independentemente do tamanho da div do wrapper.
<html>
<head>
<title>Testing</title>
<style>
br.clear { clear:both; display:block; height:1px; margin:-1px 0 0 0; }
#wrapper { max-width: 960px; min-width: 320px; background: #444; margin: 0 auto; }
.box { width: 280px; padding: 10px; margin:10px; height: 260px; border: 0px; float: left; background: #fff; }
</style>
</head>
<body>
<div id="wrapper">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<br class="clear" />
</div>
</body>
</html>
O problema é quando o navegador é redimensionado menor e uma caixa é batida na linha abaixo das caixas acenderá à esquerda, enquanto eu quero que elas sempre estejam centralizadas. Isso é possível usando css puro ou preciso usar algum jquery?