Formas de centrar imagenes con css

Hasta ami me sorprendio que se puede centrar poniendole display block al img

Sí, las imágenes se pueden centrar con CSS. Aquí tienes diferentes formas dependiendo del caso:

1. Centrar horizontalmente (imagen en bloque)

Si la imagen no está dentro de un display: flex;, puedes usar margin: auto;:

img {

display: block;

margin: auto;

}

Esto funciona porque las imágenes son inline por defecto, por lo que al hacerlas block, el margin: auto; las centra.

2. Centrar con Flexbox

Si la imagen está dentro de un contenedor, puedes usar display: flex;:

.contenedor {

display: flex;

justify-content: center;

align-items: center;

height: 100vh;

}

Esto centra cualquier contenido dentro del contenedor, incluidas las imágenes.

3. Centrar con Grid

Si usas CSS Grid, puedes centrar la imagen así:

.contenedor {

display: grid;

place-items: center;

height: 100vh;

}

place-items: center; es un atajo para justify-items y align-items.

4. Centrar en línea (text-align)

Si la imagen está dentro de un div, puedes usar text-align:

.contenedor {

text-align: center;

}

Funciona porque las imágenes son inline, y text-align afecta a los elementos en línea.