ProgramingWeb

Centrar imagen css

En algunas ocasiones esto puede parecer complicado, sobre todo para los principiantes, pero hay varias formas de centrar una imagen en css que son realmente practicas y sencillas.

La forma más común de centrar una imagen en nuestro html es la siguiente.

  • Declaramos la etiqueta img dentro de nuestro html
<img src="someImage.jpg" alt="some description" />

Por defecto la etiqueta img que es inline para alinearla en el centro debemos establecer su propiedad display: block y darle un margin: 0 auto.

img {
  display: block;
  margin : 0 auto;
}

Siguiendo esos sencillos pasos ya debes tener tu imagen centrada horizontalmente solo con algo de css.

Centrar imagen en un div con css

La mayor parte del tiempo nuestras imágenes estarán dentro de un contenedor como un div y si necesitas centrarlas, aquí tienes un ejemplo de como hacerlo.

  • Primero definimos el marcado html con un div como contenedor de la imagen.
<div class="img-container">
  <img src="someImage" alt="some description" />
</div>
.img-container{
  display: flex;
  justify-content: center;
}

El css anterior centra la imagen solo horizontalmente sigue leyendo y descubre como alinearla verticalmente.

Centrar Imagen verticalmente usando css flexbox

Para centrar una imagen verticalmente, esta debe estar dentro de una etiqueta, puede ser un div o cualquier otra.

.img-container {
   height: 400px ;
   display: flex;
   justify-content: center;
   align-items: center;
 }

-La propiedad align-items: center centrará la imagen verticalmente siempre y cuando su altura sea menor a la de su contenedor.

Con esto damos por finalizado este ejercicio, puedes ver todo el ejemplo en el siguiente codepen muchas gracias por leerme espero haberte ayudado.