Div com 'float:left' mas centralizando na página

Olá,

Bom dia/tarde/noite

Estou com uma dúvida, tenho uma div #main que contem todo o conteúdo de uma página. nela eu tenho três divs .box que são apenas três blocos flutuando a esquerda, nada de mais.

Minha duvida é, ao aplicar um @medea para fazer a página abrir em vários tamanhos, eu gostaria que o elemento div .box não só continuasse flutuando a esquerda, mas também que ele ficasse centralizado na página.

Valeu a ajuda ;)

Código do html de exemplo:

<article id="main">

<div class="box">
</div><!-- box -->

<div class="box">
</div><!-- box -->

<div class="box">
</div><!-- box -->
<div class="clear"></div>

</article><!-- main -->

Código do css de exemplo:

#content #main{width:100%; height:auto;}
#content #main .box{width:370px; height:300px; margin:5px; float:left; text-align:center;}