¿Cómo centrar una imagen en HTML y CSS?

Centrar una imagen en HTML y CSS es una tarea bastante sencilla. A continuación, te explicaré cómo hacerlo paso a paso.

Establecer la imagen

En primer lugar, necesitas tener una imagen en tu código HTML. Puedes hacerlo de dos formas:

a) Utilizando la etiqueta <img>, que es una etiqueta de imagen auto-cerrada. Por ejemplo:

<img src="ruta_de_tu_imagen.jpg" alt="Descripción_de_tu_imagen">

b) Utilizando CSS para establecer la imagen como fondo de un elemento HTML. Por ejemplo:

<div class="contenedor"></div>

.contenedor {
  background-image: url("ruta_de_tu_imagen.jpg");
  height: 500px; /* ajusta la altura del contenedor según tu necesidad */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

Centrar la imagen

Para centrar la imagen, necesitas aplicar algunos estilos CSS. Puedes hacerlo de varias maneras, aquí te muestro dos opciones:

a) Utilizando la propiedad "margin". Por ejemplo:

img {
  display: block; /* esto para evitar que se agregue un margen lateral */
  margin: 0 auto; /* esto centra la imagen horizontalmente */
}

b) Utilizando la propiedad "text-align" en un contenedor que contenga la imagen. Por ejemplo:

<div class="contenedor">
  <img src="ruta_de_tu_imagen.jpg" alt="Descripción_de_tu_imagen">
</div>

.contenedor {
  text-align: center; /* esto centra el contenido del contenedor horizontalmente */
}