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.
