Posso usar a tag ou align="center" para centralizar uma imagem?

Não. e o atributo align em estão obsoletos no HTML5. Os navegadores ainda renderizam em páginas antigas, mas align="center" em uma imagem a alinha na vertical dentro da linha, não na horizontal. Use CSS.

Docs executáveis de CSS: Centralizar imagem

Q: Como centralizar uma imagem no HTML?

Coloque text-align: center no elemento que a contém, por exemplo . Uma imagem é inline por padrão, então se centraliza como uma palavra do texto.

Q: Como centralizar uma imagem com margin auto?

Transforme a imagem em bloco primeiro: img { display: block; margin: 0 auto; }. Margens auto não centralizam elementos inline, e uma imagem é inline até você mudar isso.

A resposta rápida: text-align no pai

Um <img> é um elemento inline: ele fica em uma linha de texto como uma palavra. Então você o centraliza do mesmo jeito que centraliza texto, com text-align: center no pai:

<!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>

O estilo vai na div, não na imagem. Colocar text-align: center no próprio <img> não faz nada, porque a imagem não tem texto dentro para alinhar.

Método 2: display block e margin auto

Se você prefere estilizar a própria imagem, transforme-a em bloco e dê a ela margens laterais automáticas. O espaço livre dos dois lados é dividido 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>

A imagem cinza tem margin: 0 auto, mas continua no começo da linha: margens auto não fazem nada em um elemento inline. display: block é a peça que falta. max-width: 100% com height: auto impede que a imagem transborde uma tela estreita, preservando as proporções.

Método 3: flexbox ou grid, inclusive na vertical

Para centralizar uma imagem nas duas direções dentro de uma caixa, dê uma altura à caixa e centralize o conteúdo com grid ou 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>

O equivalente em flexbox é display: flex; justify-content: center; align-items: center;. Nos dois casos, a caixa precisa de uma altura maior que a da imagem, senão não há espaço para centralizar. Os mesmos métodos centralizam qualquer elemento; a página de como centralizar uma div compara todos eles.

Centralizar uma imagem com legenda

Uma foto com legenda vai em um <figure>. Centralize o conteúdo da figure, e a imagem e a legenda se alinham juntas:

<!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>

Várias imagens em uma linha centralizada

Uma fileira de logos ou miniaturas é trabalho para o flexbox. justify-content: center centraliza o grupo, gap dá o espaçamento e flex-wrap deixa quebrar linha em telas pequenas, mantendo tudo centralizado:

<!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>

Qual método usar

Situação	Use
Uma imagem em um parágrafo ou em um bloco simples	`text-align: center` no pai
Você só pode estilizar a imagem	`display: block; margin: 0 auto;`
Centralizar nas duas direções dentro de uma caixa	Grid `place-items: center` (ou flexbox) na caixa
Uma fileira de imagens	Flexbox com `justify-content: center`
Uma imagem com legenda	`<figure>` com `text-align: center`
Uma imagem de fundo, não conteúdo	`background-position: center`, veja background-image

Os jeitos antigos, e por que não usar

Você ainda vai encontrar isto em tutoriais antigos:

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

<center> e o atributo align foram removidos do HTML. Os navegadores ainda renderizam <center> por compatibilidade, e align="center" em uma imagem nem sequer a centraliza na horizontal: os navegadores o tratam como um alinhamento vertical dentro da linha. Use um dos métodos CSS acima.

Erros comuns

text-align: center no <img>. Coloque no pai.
margin: 0 auto em uma imagem inline. Acrescente display: block.
Centralizar na vertical sem altura no pai. A caixa encolhe até o tamanho da imagem, sem espaço para centralizar.
float: center. Esse valor não existe. Floats só vão para um lado.
Esquecer o alt. Uma imagem centralizada continua precisando de texto alternativo; use alt="" só para imagens puramente decorativas.
Uma imagem esticada. Definir width e height no CSS com valores de proporção diferente a distorce. Defina um só e use height: auto, ou acrescente object-fit: cover.

Perguntas frequentes

Como centralizar uma imagem no HTML?

Coloque text-align: center no elemento que a contém, por exemplo <p style="text-align: center;"><img src="logo.png" alt="Logo"></p>. Uma imagem é inline por padrão, então se centraliza como uma palavra do texto.

Como centralizar uma imagem com margin auto?

Transforme a imagem em bloco primeiro: img { display: block; margin: 0 auto; }. Margens auto não centralizam elementos inline, e uma imagem é inline até você mudar isso.

Como centralizar uma imagem na vertical e na horizontal?

Transforme o contêiner em grid (ou flexbox) com uma altura: .box { display: grid; place-items: center; height: 300px; }. A imagem fica então no meio da caixa.

Posso usar a tag <center> ou align="center" para centralizar uma imagem?

Não. <center> e o atributo align em <img> estão obsoletos no HTML5. Os navegadores ainda renderizam <center> em páginas antigas, mas align="center" em uma imagem a alinha na vertical dentro da linha, não na horizontal. Use CSS.

Por que aparece um pequeno espaço embaixo da minha imagem centralizada?

Uma imagem inline fica apoiada na linha de base do texto, deixando espaço embaixo para as letras que descem. Defina display: block na imagem, ou vertical-align: middle, e o espaço some.

Conceitos relacionados