Centrar horizontalmente, un div dentro de otro

[mblascog]

Buenas,
Estoy intentando centrar un div y no lo consigo.
El código html es el siguiente:

Código HTML:

<section>
        <article>
            <?php echo $instalacions[$idioma]; ?>
            <div>
                <div>
                    <a class="fancybox" href='<?php echo "imatges/instal11.png"?>' title="<?php echo $columna11[$idioma]; ?>"><img src="../imatges/instal11.png" width="210px" height="140px" alt="" /></a> 
                    <br/><?php echo $columna11[$idioma];?>
                </div>
                <div>
                    <a class="fancybox" href='<?php echo "imatges/instal12.png"?>' title="<?php echo $columna12[$idioma]; ?>"><img src="../imatges/instal12.png" width="210px" height="140px" alt="" /></a> 
                    <br/><?php echo $columna12[$idioma];?>
                </div>
                <div>
                    <a class="fancybox" href='<?php echo "imatges/instal13.png"?>' title="<?php echo $columna13[$idioma]; ?>"><img src="../imatges/instal13.png" width="210px" height="140px" alt="" /></a> 
                    <br/><?php echo $columna13[$idioma];?>
                </div>
                <div>
                    <a class="fancybox" href='<?php echo "imatges/instal14.png"?>' title="<?php echo $columna14[$idioma]; ?>"><img src="../imatges/instal14.png" width="210px" height="140px" alt="" /></a> 
                    <br/><?php echo $columna14[$idioma];?>
                </div>
                <div>
                    <a class="fancybox" href='<?php echo "imatges/instal21.png"?>' title="<?php echo $columna21[$idioma]; ?>"><img src="../imatges/instal21.png" width="210px" height="140px" alt="" /></a> 
                    <br/><?php echo $columna21[$idioma];?>
                </div>
                <div>
                    <a class="fancybox" href='<?php echo "imatges/instal22.png"?>' title="<?php echo $columna22[$idioma]; ?>"><img src="../imatges/instal22.png" width="210px" height="140px" alt="" /></a> 
                    <br/><?php echo $columna22[$idioma];?>
                </div>
            </div>
        </article>
        <footer>
            <?php include("includes/inc_peu.php") ?>
        </footer>   
    </section>
 

Y el código CSS este:

Código CSS:

section article{box-sizing:border-box;-moz-box-sizing:border-box;background:lightgray;width:100%;font:0.8em/2.0 'Arial';color:#000;vertical-align:top;text-align:justify;padding:3%;}
section article p{padding-top:2%;}
section article em {font-weight:bold;}
section article div {overflow:hidden;padding-top:2%;}
section article div div {box-sizing:border-box;-moz-box-sizing:border-box;float:left;border:1px solid black;padding:0.5%;margin:0.5%;text-align:center;}
 

Y el resultado es este:

section: es la zona verde
article: es la zona azul
article div: es igual de ancho que el azul pero empieza por debajo de la frase.

Y lo que quiero los recuadros queden centrados dentro de article div.

La web se puede ver aquí

Muchas gracias.