Existen 2 maneras para centrar elementos HTML, ambas muy conocidas y difundidas. Con CSS, centrar un elemento depende de sí mismo:

Elementos lineales⌗

Estos elementos son los que no son en formato bloque, como e imágenes . Para centrarlos, se utiliza la propiedad text-align dentro del contenedor que lo alberga:

#container {
     text-align: center;
}

Elementos bloque⌗

Estas etiquetas son las que por defecto son considerados block, como

,

,

, etc. Para centrarlos, basta con definir automático en su margen derecho e izquierdo. Para el mismo ejemplo HTML anterior:

#container {
     margin-left: auto;
     margin-right: auto;
}

o lo que es lo mismo:

#container {
     margin: 0 auto;
}

Un detalle es que estos elementos bloque por defecto tienen un ancho de 100%, por lo que no se centrarían a menos que definamos un ancho menor que éste, sea porcentual o en pixeles.

#container {
     margin: 0 auto;
     width: 50%;
}

Como nada es perfecto y es de suponerse, IE hace lo que quiere. En doctype no estricto o estándar, considera los elementos en bloque como elemento línea, con lo que centrarlo con margin no es tomado en cuenta. Lo que se debe hacer es mezclar ambas técnicas, dándole al elemento contenedor (puede ser hasta el mismo ) un alineado de texto, además de centrarlo horizontalmente con márgenes automáticos. Pero claro, este alineado central de texto será heredado por todos sus elementos interiores (#container,

, etc) por lo que debemos volver a decirle al div#container que vuelva a alinear todo en su interior a la izquierda o justificado. Finalmente:

body {
     text-align: center;
}

#container {
     margin: 0 auto;
     width: 50%;
     text-align: left;
}

Esto debería de solucionarse desarrollando en XHTML strict, incluso HTML standart (y definiéndolo explícitamente en el ), pero con 2 líneas de código podemos anticiparnos a posibles errores.

Ver resultado final{.verejemplo}

Links:

• Centring using CSS
• Quirks mode and strict mode