Cómo centrar una imagen con css

Actualizado : 2023-09-28

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 su 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 div 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

Juneiker Castillo freelance web developer

Soy Juneiker Castillo, un desarrollador web frontend apasionado por la programación y la creación de sitios web modernos rápidos y escalables, en fin un friki 🤓 de javascript enamorado de react js ⚛️.

Sobre mi