¿Puedo usar la etiqueta o align="center" para centrar una imagen?

No. y el atributo align en están obsoletos en HTML5. Los navegadores todavía muestran en páginas antiguas, pero align="center" en una imagen la alinea en vertical dentro de la línea, no en horizontal. Usa CSS.

Docs ejecutables de CSS: Centrar una imagen

Q: ¿Cómo centro una imagen en HTML?

Pon text-align: center en el elemento que la contiene, por ejemplo . Una imagen es inline por defecto, así que se centra como una palabra del texto.

Q: ¿Cómo centro una imagen con margin auto?

Primero convierte la imagen en bloque: img { display: block; margin: 0 auto; }. Los márgenes auto no centran elementos inline, y una imagen es inline hasta que la cambias.

La respuesta rápida: text-align en el padre

Un <img> es un elemento inline: se ubica en una línea de texto como una palabra. Así que lo centras igual que el texto, con text-align: center en su padre:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Center an image</title>
  <style>
    .wrap { text-align: center; border: 1px dashed #9ca3af; padding: 8px; }
  </style>
</head>
<body>
  <div class="wrap" id="wrap">
    <img id="img" width="160" height="100" alt="Blue rectangle"
      src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='100'%3E%3Crect width='160' height='100' rx='8' fill='%232563eb'/%3E%3C/svg%3E">
  </div>
</body>
</html>

El estilo va en el div, no en la imagen. Poner text-align: center en el propio <img> no hace nada, porque la imagen no tiene texto dentro que alinear.

Método 2: display block y margin auto

Si prefieres dar estilo a la propia imagen, conviértela en bloque y dale márgenes laterales automáticos. El espacio libre a cada lado se reparte por igual:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Block and margin auto</title>
  <style>
    .centered {
      display: block;
      margin: 0 auto;
      max-width: 100%;
      height: auto;
    }
    .frame { border: 1px dashed #9ca3af; padding: 8px 0; margin-bottom: 8px; }
  </style>
</head>
<body>
  <div class="frame">
    <img class="centered" id="img" width="160" height="100" alt="Green rectangle"
      src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='100'%3E%3Crect width='160' height='100' rx='8' fill='%2316a34a'/%3E%3C/svg%3E">
  </div>
  <div class="frame">
    <img style="margin: 0 auto;" id="inline" width="160" height="100" alt="Gray rectangle"
      src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='100'%3E%3Crect width='160' height='100' rx='8' fill='%239ca3af'/%3E%3C/svg%3E">
  </div>
</body>
</html>

La imagen gris tiene margin: 0 auto, pero se queda al inicio de la línea: los márgenes auto no hacen nada en un elemento inline. display: block es la pieza que falta. max-width: 100% con height: auto evita que la imagen se desborde en una pantalla angosta y mantiene sus proporciones.

Método 3: flexbox o grid, también para centrar en vertical

Para centrar una imagen en las dos direcciones dentro de una caja, dale una altura a la caja y centra su contenido con grid o flexbox:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Center vertically</title>
  <style>
    .box {
      display: grid;
      place-items: center;
      height: 220px;
      background: #f3f4f6;
      border: 1px solid #d1d5db;
    }
  </style>
</head>
<body>
  <div class="box" id="box">
    <img id="img" width="120" height="120" alt="Amber circle"
      src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Ccircle cx='60' cy='60' r='60' fill='%23f59e0b'/%3E%3C/svg%3E">
  </div>
</body>
</html>

El equivalente con flexbox es display: flex; justify-content: center; align-items: center;. En los dos casos la caja necesita una altura mayor que la imagen, o no hay espacio en el que centrar. Los mismos métodos centran cualquier elemento; la página de cómo centrar un div los compara todos.

Centrar una imagen con pie de foto

Una foto con pie de foto va en un <figure>. Centra el contenido de la figura, y la imagen y el pie quedan alineados juntos:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Figure</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    figure {
      margin: 0;
      text-align: center;
    }
    figure img { max-width: 100%; height: auto; }
    figcaption { font-size: 14px; color: #4b5563; margin-top: 6px; }
  </style>
</head>
<body>
  <figure id="fig">
    <img id="img" width="200" height="120" alt="A mountain drawing"
      src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='120'%3E%3Crect width='200' height='120' fill='%23bfdbfe'/%3E%3Cpath d='M0 120L70 40L140 120Z' fill='%2316a34a'/%3E%3Cpath d='M80 120L150 55L200 100V120Z' fill='%2315803d'/%3E%3C/svg%3E">
    <figcaption id="cap">Figure 1. A centered image with its caption.</figcaption>
  </figure>
</body>
</html>

Varias imágenes en una fila centrada

Una fila de logos o miniaturas es trabajo para flexbox. justify-content: center centra el grupo, gap lo espacia y flex-wrap permite que pase a varias líneas en pantallas pequeñas sin dejar de estar centrado:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Centered row</title>
  <style>
    .row {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      align-items: center;
      gap: 12px;
      padding: 12px;
      border: 1px dashed #9ca3af;
    }
  </style>
</head>
<body>
  <div class="row" id="row">
    <img width="80" height="50" alt="Logo one" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='50'%3E%3Crect width='80' height='50' rx='6' fill='%232563eb'/%3E%3C/svg%3E">
    <img width="80" height="50" alt="Logo two" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='50'%3E%3Crect width='80' height='50' rx='6' fill='%2316a34a'/%3E%3C/svg%3E">
    <img width="80" height="50" alt="Logo three" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='50'%3E%3Crect width='80' height='50' rx='6' fill='%23f59e0b'/%3E%3C/svg%3E">
  </div>
</body>
</html>

Qué método usar

Situación	Usa
Una imagen en un párrafo o en un bloque simple	`text-align: center` en el padre
Solo puedes dar estilo a la imagen	`display: block; margin: 0 auto;`
Centrar en las dos direcciones dentro de una caja	Grid `place-items: center` (o flexbox) en la caja
Una fila de imágenes	Flexbox con `justify-content: center`
Una imagen con pie de foto	`<figure>` con `text-align: center`
Una imagen de fondo, no de contenido	`background-position: center`, consulta background-image

Las formas antiguas, y por qué no

Todavía las vas a encontrar en tutoriales viejos:

<!-- obsolete: do not use -->
<center><img src="logo.png" alt="Logo"></center>
<img src="logo.png" alt="Logo" align="center">

<center> y el atributo align se eliminaron de HTML. Los navegadores todavía muestran <center> por compatibilidad, y align="center" en una imagen ni siquiera la centra en horizontal: los navegadores lo tratan como una alineación vertical dentro de la línea. Usa uno de los métodos CSS de arriba.

Errores comunes

text-align: center en el <img>. Ponlo en el padre.
margin: 0 auto en una imagen inline. Agrega display: block.
Centrar en vertical sin altura en el padre. La caja se ajusta a la imagen y no deja espacio en el que centrar.
float: center. Ese valor no existe. Los floats solo van a un lado.
Olvidar alt. Una imagen centrada sigue necesitando texto alternativo; usa alt="" solo para imágenes puramente decorativas.
Una imagen estirada. Definir en CSS width y height con valores de otra proporción la deforma. Define uno y usa height: auto, o agrega object-fit: cover.

Preguntas frecuentes

¿Cómo centro una imagen en HTML?

Pon text-align: center en el elemento que la contiene, por ejemplo <p style="text-align: center;"><img src="logo.png" alt="Logo"></p>. Una imagen es inline por defecto, así que se centra como una palabra del texto.

¿Cómo centro una imagen con margin auto?

Primero convierte la imagen en bloque: img { display: block; margin: 0 auto; }. Los márgenes auto no centran elementos inline, y una imagen es inline hasta que la cambias.

¿Cómo centro una imagen en vertical y en horizontal?

Convierte su contenedor en un grid (o flexbox) con una altura: .box { display: grid; place-items: center; height: 300px; }. La imagen queda entonces en el medio de la caja.

¿Puedo usar la etiqueta <center> o align="center" para centrar una imagen?

No. <center> y el atributo align en <img> están obsoletos en HTML5. Los navegadores todavía muestran <center> en páginas antiguas, pero align="center" en una imagen la alinea en vertical dentro de la línea, no en horizontal. Usa CSS.

¿Por qué hay un pequeño espacio debajo de mi imagen centrada?

Una imagen inline se apoya en la línea base del texto y deja espacio debajo para los trazos descendentes de las letras. Pon display: block en la imagen, o vertical-align: middle, y el espacio desaparece.

Conceptos relacionados