Centrar imagen html con CSS

Uno de los problemas que presenta la etiqueta img al no ser inline es que no es fácil centrarla (alinear en el centro de la página) con CSS.

El texto de un párrafo se centra con un text-align: center; pero, como digo, la imagen al no ser inline no se puede centrar así.

Cuando un elemento del HTML no es un elemento en linea (se interpreta en línea) hemos de tratarlo como un bloque y para estos casos existe la propiedad display: block; y, como cualquier otro bloque, le asignaremos un margen automático para que se centre.

De esta manera centraremos la imagen de nuestro código HTML:

img{
display:block;
margin:auto;
}

¡MANTENME INFORMADO!

¡Gracias por tu interés en estar informado del próximo lanzamiento de mis cursos! 😎

¡No hago spam! Lee la política de privacidad para tener más información.

55 comentarios en “Centrar imagen html con CSS”

  1. Si se centro la imagen pero del acho de mi navegador, es decir que me falta centrarlo del largo. necesito que quede en el puro centro del navegador, como hago eso?

    Responder

  5. Gracias, por tu aporte busque muchos recursos hasta llegar a este artículo y me fue muy útil, saludos desde Pasto – Nariño – Colombia

    Responder

    1. Tu respuesta me dio la idea de dar con la solución:
      img{
      display: block;
      height: 50vh;
      width: auto;
      margin: 25vh auto;
      }
      Asignarle la altura de la imagen con el 50% del viewport (50vh). Luego el resto del 50% lo repartes en los márgenes superior e inferior con 25% cada uno.

      Responder

  38. excelente, es una forma de refrescar la memoria y tratar a las imagenes como textos, nunca se duerme sin aprender algo nuevo cada día.

    Responder

  49. Después de buscar la propiedad durante un día, se me ocurrió buscarla en Internet. Se me presentó esta página y en 5 minutos ya tenía la solución. Muchas gracias.

    Responder

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

*

*

DARÍO BALBONTÍN FERNÁNDEZ es el Responsable del tratamiento de los datos personales del usuario y le informa que estos datos serán tratados de conformidad con lo dispuesto en el Reglamento (UE) 2016/679 de 27 de abril (GDPR) y la Ley Orgánica 3/2018 de 5 de diciembre (LOPDGDD), por lo que se le facilita la siguiente información del tratamiento: Fin del tratamiento: mantener una relación comercial y el envío de comunicaciones sobre nuestros productos y servicios. Criterios de conservación de los datos: se conservarán mientras exista un interés mutuo para mantener el fin del tratamiento y cuando ya no sea necesario para tal fin, se suprimirán con medidas de seguridad adecuadas para garantizar la seudonimización de los datos o la destrucción total de los mismos.Comunicación de los datos: No se comunicarán los datos a terceros, salvo obligación legal. Derechos que asisten al usuario: Derecho a retirar el consentimiento en cualquier momento. Derecho de acceso, rectificación, portabilidad y supresión de sus datos y a la limitación u oposición al su tratamiento. Derecho a presentar una reclamación ante la Autoridad de control (agpd.es) si considera que el tratamiento no se ajusta a la normativa vigente. Datos de contacto para ejercer sus derechos: contacto@dariobf.com.