CENTRADO HORIZONTAL DE ELEMENTOS

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, ya que es é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.

IT&FEEL, C.A.
www.itandfeel.com
Maracay, Aragua, 2110, Venezuela