Para centrar bloques de contenido, imágenes u otro elemento dentro de nuestro contenedor lo que debemos hacer es lo siguiente:
div { width: 400px; margin: auto; }
Definimos el ancho del elemento, ya que si ocupara un 100% o este no fuese definido, no tendría efecto el aplicar margin:auto. Éste último estilo es el que realmente hace el trabajo, pues le indica al navegador que el espacio restante al que ocupa el elemento definido, sea divido en partes iguales y que sea aplicado a ambos lados del elemento.
Para el caso de imágenes responsive, a pesar de que su ancho es de 100%, el height será auto, por lo que la imagen será proporcional al tamaño del contenedor en el que se encuentra. En este aspecto podemos indicar un ancho fijo al contenedor y aplicar de igual forma a la imagen un margin:auto.
contenedor { width: 75%; } contenedor img { display: block; width: 100%; height: auto; margin: auto; }
Dando como resultado una imagen centrada horizontalmente.
Y eso es todo, esperamos que esta información les sea de utilidad.