Cómo centrar una imagen usando CSS

Leer también: Alinear imágenes con CSS: a Derecha, Centro e Izquierda
Centrar imágenes implica que seamos conscientes de que CSS no tiene una forma efectiva de tratar a objetos o elementos del tipo imagen o IMG. Muy parecido a lo que ocurre con HTML con el atributo Height, en las tablas.

Posiblemente resueltas en la versión de CSS3 que no será dicho sea de paso para esta generación de navegadores.

Así que ¿cómo centramos un objeto que CSS no tiene una forma específica para ser centrado?

Bueno, la respuesta es sencilla, envolverlo en un elemento de linea como SPAN o un elemento contenedor o de bloque como DIV. En ambos casos convertiremos a elementos que pueden ser manipulados por CSS:

Primero necesitamos la imagen

<img src="http://tusitio/centrar.jpg" alt="descripción de imagen" />

Para nuestro ejemplo usaremos la de abajo:



Ahora para centrarla la envolveremos dentro de una etiqueta DIV

<div><img src="http://tusitio/centrar.jpg" alt="descripción de imagen" /></div>

A la etiqueta DIV le agregaremos el atributo STYLE que corre CSS y lo centraremos usando la propiedad text-align en modo centrado o "center". el resultado sería:

<div style="text-align:center;" > <img src="http://tusitio/centrar.jpg" alt="descripción de imagen" /></div>

El resultado aplicado a la imagen:

Usando SPAN y DISPLAY:BLOCK;
Si queremos podemos cambiar DIV por SPAN y quedaría:

<span style="display:block;text-align:center;" ><img src="http://tusitio/centrar.jpg" alt="descripción de imagen" /></span>

Cabe destacar que aquí tendremos que agregar el atributo display y la subpropiedad block, para que trate el elemento de la misma manera que un objeto contenedor o de bloque, como una tabla o un div. esto significa que agregaremos display:block; y text-align:center; para centrar nuestra imagen y obtendremos el mismo resultado que en un div:



Usarlo desde un archivo CSS
Si lo queremos agregar a nuestra hoja de estilo y en diferentes partes de nuestra página simplemente con clases (CLASS) podremos enlazarlos sin problema:

En el archivo CSS de tu sitio escribe para el caso de un div:

.centrardiv {text-align:center;}

para el caso de SPAN escribe:

.centrarspan
{
display:block;
text-align:center;
}

Ahora en tu página web y usando CLASS podemos asociarlo a DIV de la siguiente forma:

<div class="centrardiv"><img src="http://tusitio/centrar.jpg" alt="descripción de imagen" /></div>

o usando SPAN:

<span class="centrarspan"><img src="http://tusitio/centrar.jpg" alt="descripción de imagen" /></span>

Centrar usando Padding y margin usando medidas conocidas
Esto es para centrado relativo o de porcentajes, si ustedes tiene sitios en pixeles o de tamaño fijo, otra forma de centrar es usando Padding y Margin, por ejemplo:

<img style="padding-left:150px;" border="0" src="http://tusitio/centrar.jpg" alt="centrar imagen con padding" />

Notaran que uso la propiedad padding-left, pues por lo general y a menos que lo indiquen en CSS, los objetos se alinearán a la izquierda y el padding-left hace una separación hacia dentro del objeto y el contenido tomando como inicio el lado izquierdo de la página web o el contenedor que lo rodea, convertido a valores de padding con arriba, derecha y abajo en 0, sería:

padding: 0 0 0 150px;

esto es igual a;

<img style="padding: 0 0 0 150px;" border="0" src="http://tusitio/centrar.jpg" alt="centrar imagen con padding" />

Pero es necesario conocer el tamaño del espacio y compararlo con la imagen. Si quisiéramos centrar una imagen en un espacio de 350px de ancho y nuestra imagen mide 50px, lo obvio sería con un padding-left a 150px pues la mitad de un objeto de 50 px en un espacio de 350px sería 150px + 50px + 150px. Aunque no siempre es así de fácil, por lo que recomiendo el centrado con DIV o SPAN.

Resultado:


Se puede resolver el problema de muchas formas, todo depende de la creatividad con que empleé sus conocimientos de CSS.
Dudas en comentarios.

Fé de erratas: en el artículo en cuestión, olvidé hablar del atributo display:block, pero ya está corregido.