Centrar una imagen en CSS

1. Utilice las propiedades display y margin para centrar una imagen en CSS
2. Utilice la propiedad text-align para centrar una imagen en CSS
3. Utilice la propiedad CSS flexbox para centrar una imagen

En este artículo, presentaremos tres métodos para centrar una imagen en HTML con la ayuda de CSS.

Utilice las propiedades display y margin para centrar una imagen en CSS

Podemos usar las propiedades CSS display y margin juntas para centrar una imagen. La propiedad display de la imagen es inicialmente inline. Por tanto, podemos agregar varias imágenes en una línea. Por ejemplo, si escribimos el siguiente código, podemos ver dos imágenes seguidas.

<img src="apple.jpg" alt="apple"/>
<img src="banana.jpg" alt="banana" /> 

Por lo tanto, tenemos que cambiar la propiedad display de la imagen a block para que solo se coloque una imagen en una línea. Luego, podemos darle a la imagen un margin de 0px auto para centrarla. La imagen tendrá un margen de 0px desde la parte superior e inferior. El primer valor puede ser cualquier número, pero el segundo valor debe ser auto. El auto da a la imagen un margin que la coloca justo en el centro. Este proceso solo funciona si tenemos que centrar solo una imagen en una fila.

Por ejemplo, cree un documento HTML y coloque una imagen usando la etiqueta img. Escriba el valor src correctamente y escriba una alt para que la imagen sea significativa cuando la imagen no se muestra por alguna razón. Utilice la imagen de marcador de posición https://loremflickr.com/320/240 en el atributo src. En CSS, establezca la propiedad display en block y asígnele un margin de 0px auto. El primer valor de margin se establece en cualquier número de acuerdo con nuestro requisito.

El siguiente ejemplo muestra que la imagen está centrada cuando establecemos el valor de display en block y le damos un margin de 0px auto.

Código de ejemplo:

<img src="/img/DelftStack/logo.png" alt="Logo" />

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

Utilice la propiedad text-align para centrar una imagen en CSS

Podemos usar la propiedad CSS text-align para centrar una imagen. Podemos envolver una imagen dentro de un div y establecer la propiedad text-align en center, luego la imagen estará centrada. Este método puede centrar varias imágenes en una línea, a diferencia del método anterior que solo centraba una imagen. Podemos utilizar este método tanto para imágenes únicas como múltiples.

Por ejemplo, cree un div y asígnele una clase de parent. Luego, dentro del div, use la etiqueta img para cargar una imagen. Establezca src en https://loremflickr.com/320/240 y alt en cat. En CSS, seleccione el div usando su nombre de clase, es decir, .parent y establezca su propiedad text-align en center.

El siguiente ejemplo muestra que la imagen dentro del div está centrada cuando establecemos la propiedad CSS text-align de div como center.

Código de ejemplo:

<div class="parent">
 <img src="/img/DelftStack/logo.png" alt="Logo" />
</div>

.parent{
 text-align : center;
}

Utilice la propiedad CSS flexbox para centrar una imagen

Flexbox es una de las tecnologías CSS más utilizadas. La idea principal detrás de flexbox es darle al contenedor la capacidad de alterar sus elementos. Podemos usar las propiedades de flexbox dentro de un contenedor estableciendo la propiedad display como flex. Entonces podemos usar la propiedad justify-content: center para centrar los elementos o imágenes dentro del contenedor horizontalmente. Podemos establecer la propiedad align-items en center para centrar los elementos verticalmente.

Por ejemplo, cree un div y asígnele un nombre de clase de contenedor. Luego coloque una imagen dentro del div usando la etiqueta img con src y alt. Seleccione el div usando su nombre de clase, es decir, .container y establezca su propiedad display en flex. A continuación, establezca la propiedad justify-content flexbox en center.

El siguiente ejemplo muestra que la image dentro del div está centrada usando las propiedades de flexbox.

<div class="container">
 <img src="/img/DelftStack/logo.png" alt="Logo" />
</div>

.container{
 display: flex;
 justify-content: center;
}