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

Cómo centrar una imagen html con css

css svg html svg
actualizado: 16 / 07 / 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 sin contenedor tratandola como elemento de bloque

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.

Centrar imagén en un div horizontal y verticalmente usando CSS - FLEXBOX

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

Solo horizontalmente

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

Alinerar en ambos sentidos

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

Centrar imagen horizontal y verticalmente con CSS - GRID

Con css grid podemos centrar usando la propiedad place-content

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 crear un menú desplegable con html y css

Imagen destacada del artículo Cómo crear un menú desplegable con html y css

Aprende a usar e insertar imágenes en html

Imagen destacada del artículo Aprende a usar e insertar imágenes en html

Cómo poner una imagen de fondo en html con css

Imagen destacada del artículo Cómo poner una imagen de fondo en html con css

Cómo justificar el texto html con css

Imagen destacada del artículo Cómo justificar el texto html con css

Cómo cambiar color del texto en html con css

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

Cómo poner color de fondo en html con css

Imagen destacada del artículo Cómo poner color de fondo en html con css

Cómo insertar estilos css en html

Imagen destacada del artículo Cómo insertar estilos css en html

CSS text-align propiedad para alinear el texto de una etiqueta html

Imagen destacada del artículo CSS text-align propiedad para alinear el texto de una etiqueta html