Imagen destacada del artículo Cómo centrar una imagen con css

Cómo centrar una imagen con css

css svg html svg
actualizado: 13 / 10 / 2022

Existen muchas maneras de centrar una imagen usando css, en este tutorial aprenderas diferentes formas de hacerlo con solo una pocas líneas de código.

Centrar imagen css sin contenedor con display block

Normalmente cuándo trabajamos con imágenes solemos envolverlas en un elemento contenedor que es el que usamos para manipular la posición de dicha imagen.

En ocasiones necesitaremos centrar imágenes que sean hijas de un elemento al que no podremos manipular ya que afectaríamos al resto del contenido, cuándo este sea el caso recurriremos al siguiente truqito (hack).

html
<img src="someImage.jpg" alt="css centrar imagen" />

La etiqueta img por defecto se comporta como un elemento inline, si quieres alinearla al centro basta con establecer su valor en de display en block y agregar un margen automático para ponerla en el centro tal y como lo haríamos con cualquier otra etiqueta.

css
img {
display: block;
margin: auto;
}
Nota importante:

solo notarás que la imagen esta centrada si su ancho es menor al del contenedor.

El código anterior solo centrará de forma horizontal a continuación verás como también puedes hacerlo verticalmente usando grid y flexbox.

alinear imagen al centro css horizontal y verticalmente con flexbox

Para este ejemplo vamos a centrar una imagen dentro de un div utilizando css flexbox

html
<div class="div-img">
<img src="ruta de la imagen" alt="centrar img con flexbox" />
</div>

Código para centrar la imagen solo horizontalmente

css
.div-img {
display: flex;
justify-content: center;
}

Código para poner la imagen del div en el medio verticalmente

css
.div-img {
display: flex;
justify-content: center;
align-items: center;
}

Centrar imagen html horizontal y verticalmente con css grid

Al igual que con flexbox con grid podemos centrar elementos usando la propiedad place-content centremos la misma imagen del dev anterior pero usando esta propiedad

html
<div class="photo-container">
<img src="ruta de la imagen" alt="centrar foto" />
</div>
css
.photo-container {
display: grid;
place-content: center;
}

Si deseas solo hacerlo horizontalmente css grid al igual que flexbox también tiene la propiedad justify-content.

css
.photo-container {
display: grid;
justify-content: center;
}

Ver ejemplo de imagen centrada en codepen

Cargando... Esperando para mostrar el código de este ejemplo
Artículos relacionados:
Cómo utilizar negrita en CSS: Aprende a resaltar tu contenido

Imagen destacada del artículo Cómo utilizar negrita en CSS: Aprende a resaltar tu contenido

Cómo hacer una tienda online con HTML y CSS: Una guía paso a paso

Imagen destacada del artículo Cómo hacer una tienda online con HTML y CSS: Una guía paso a paso

Colores en html: cómo utilizar los formatos RGB, hexadecimal y HSL

Imagen destacada del artículo Colores en html: cómo utilizar los formatos RGB, hexadecimal y HSL

Cómo cambiar color de texto html con css

Imagen destacada del artículo Cómo cambiar color de texto html con css

Cursor en css: personalizar el puntero del mouse

Imagen destacada del artículo Cursor en css: personalizar el puntero del mouse

Input css: personalizar estilos de campos de entrada en css

Imagen destacada del artículo Input css: personalizar estilos de campos de entrada en css

Cómo centrar un botón con css

Imagen destacada del artículo Cómo centrar un botón con css