Centrar un div en nuestra web con css

Si programáis en entorno web es bastante probable que hayáis encontrado este problema. Entre los atributos de estilo de un div podemos especificar la alineación central del contenido del div (con text-align), pero no del propio contenedor.

Algunos hemos hecho "ñapas" del tipo de declarar un div contenedor con text-align=center que contenga al div que queremos centrar, pero la solución es mucho más sencilla: poner tanto el margen derecho como el izquierdo a auto:

En css

#centrar{ 

  width:500px; /* Por ejemplo, si ocupa el 100% de la página no hay centrado ;) */

  margin-right: auto;

  margin-left: auto; 

  /* Estas dos siguientes son sólo para ilustrar mejor el ejemplo */

  padding:20px;

  color:red;

 }

(Y en nuestra página)

<div id="centrar">div centrado con contenido a la izquierda</div>

En HTML 

<div style="width:500px;margin-left:auto;margin-right:auto;background-color:red;padding:20px;">div centrado con contenido a la izquierda </div>

El resultado

Está probado en Firefox 15 y Explorer 9. Espero que os sea tan útil como a mí