Saber como centralizar uma imagem no CSS é um conhecimento importante para a criação e edição de sites. Mesmo com um layout bonito, uma foto mal posicionada pode comprometer toda a aparência e a estrutura de uma página.

E, apesar de parecer algo básico, muitas vezes essa tarefa gera dúvidas, principalmente em quem ainda não tem muita experiência técnica em linguagem de estilo.

É válido destacar que centralizar imagens não é apenas uma questão estética. É um cuidado que proporciona um visual mais profissional a páginas na internet e contribui diretamente com a experiência de navegação dos usuários.

Sendo assim, confira nesse conteúdo como centralizar uma imagem na prática com CSS, tanto horizontal quanto verticalmente, além de outros pontos relevantes sobre o assunto!

Por que alinhar imagens é importante no design moderno

Em sites profissionais, cada detalhe conta. E a centralização correta de uma imagem é um aspecto que transmite mais organização, melhora a leitura do conteúdo e cria uma harmonia com os demais elementos.

Além disso, um bom alinhamento é indispensável para garantir um layout limpo e responsivo, no qual as páginas funcionam bem em diferentes tamanhos de tela, desde computadores até celulares e tablets.

Ainda, ao dar atenção ao alinhamento de imagens você evita que elas fiquem fora do lugar e proporciona um visual mais equilibrado às suas páginas. Esses pontos são essenciais para a usabilidade e a taxa de conversão de sites.

Como centralizar uma imagem no CSS na horizontal: formas tradicionais

Existem dois métodos clássicos de centralização horizontal no CSS que ainda funcionam bem em diversas situações. Veja quais são eles!

Text-align: center no container

Esse método é ideal quando a imagem está dentro de um elemento inline ou inline-block, como uma <div>. Confira um exemplo:

Essa é uma opção mais simples, sem necessidade de configurações adicionais. Porém, ela funciona apenas se a imagem for um elemento inline e não modifica o alinhamento vertical.

Margin: auto com display: block e largura

Outro método tradicional é utilizar margin: auto, desde que a imagem tenha display: block e uma largura (width) definida. Ressaltando que ela deve ser menor do que a largura da página. Veja um exemplo:

Nesta alternativa, a imagem é convertida em bloco, permitindo que margin: auto; centralize horizontalmente, sem necessidade de estilizar o container. Contudo, ela exige definição de largura para funcionar corretamente.

Tabela comparativa 

Confira um resumo com os principais prós, contras e uso ideal de cada método:

Método	Prós	Contras	Ideal para
Text-align: center	Simples, direto e rápido	Não serve para alinhamento vertical	Layouts básicos e imagens inline
Margin: auto	Controla margens facilmente	Precisa de largura definida	Elementos block em colunas

Como centralizar uma imagem no CSS com soluções modernas (Flexbox e CSS Grid)

Com o avanço do CSS, surgiram maneiras mais eficientes e versáteis de centralizar imagens, especialmente úteis para layouts responsivos. Conheça-as!

Flexbox — display: flex; justify-content: center

Flexbox é um modelo poderoso para alinhar itens tanto na horizontal quanto na vertical, com mais controle sobre o comportamento dos elementos. Ele é flexível, responsivo e simples de implementar, sem precisar definir a largura da imagem.

Veja:

Grid — display: grid; place-items: center

O CSS Grid permite alinhar uma imagem no centro exato do container, tanto horizontal quanto verticalmente, com apenas uma linha de código. 

Ele possibilita uma centralização multidimensional de forma clara e enxuta, ideal para interfaces modernas. Confira:

Centralização vertical e completa (horizontal + vertical)

Para centralizar uma imagem exatamente no meio da tela (ou de um container), é possível combinar métodos mais robustos. Confira-os a seguir!

Flexbox completo — justify-content + align-items

O flexbox é um ótimo para posicionar qualquer elemento no centro exato. Ele funciona bem em diferentes resolução de tela, sendo uma opção interessante, por exemplo para páginas de login e destaques visuais. Veja:

Posicionamento absoluto + transform: translate(-50%, -50%)

Este é um método tradicional para centralizar sem depender de Flexbox ou Grid. Ele é útil em designs mais antigos ou quando não se quer alterar o layout do container. Acompanhe um exemplo:

CSS Grid com place-items em um container de altura total

Para layouts modernos, o CSS Grid ainda é uma das formas mais diretas de centralizar imagens no meio da tela. Ele é simples e eficaz. Confira:

Centralização e responsividade

A responsividade é uma característica primordial para garantir que imagens continuem centralizadas em qualquer dispositivo, sem cortes e sem distorcer layouts de páginas.

Para isso, também existem códigos específicos para você usar. Veja!

Comportamento em telas menores (media queries)

É possível ajustar o posicionamento com media queries, evitando que imagens grandes ultrapassem a largura da tela. Acompanhe um exemplo:

Impacto da largura e altura do container

É importante definir limites máximos e mínimos do container para evitar que a centralização quebre o layout em dispositivos pequenos, como celulares.

Dicas para elementos sem tamanho fixo

Para complementar, confira algumas dicas práticas para lidar com eles sem tamanho fixo:

• Use max-width: 100% para que a imagem se adapte ao tamanho do container;
• Evite usar position: absolute com imagens que precisam se ajustar dinamicamente;
• Combine flex ou grid com height (altura): auto para maior controle.

Flexbox e Grid se adaptam melhor quando o elemento não tem largura ou altura pré-definida, mantendo a centralização em qualquer situação.

Fluxo de layout com Flexbox vs. CSS Grid

O Flexbox é ideal para uma dimensão (linha ou coluna). Eixo principal → alinhamento simples.

Já o Grid melhor para alinhamento em duas dimensões (linha e coluna ao mesmo tempo). Linhas + colunas → alinhamento completo.

Compatibilidade

Técnica	Compatibilidade
Flexbox	Navegadores modernos e antigos
Grid	Navegadores modernos
transform + absolute	Amplamente suportado

Boas práticas

Na hora de centralizar uma imagem no CSS, é importante seguir algumas boas práticas, como:

• Manter o código limpo;
• Usar classes específicas;
• Testar diferentes tamanhos de tela;
• Combinar técnicas quando necessário;
• Utilizar imagens otimizadas (leves) para carregamento mais rápido;
• Sempre defina “alt” nas imagens para acessibilidade e SEO (Search Engine Optimization).

Assista:

Exercício prático 

Copie o código abaixo, altere a largura da imagem e veja como se comporta:

<div class="container">
  <img src="imagem.jpg" alt="Imagem centralizada">
</div>
<style>
  .container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 600px;
  }
  img {
    max-width: 100%;
    height: auto;
  }
</style>

Teste direto na ferramenta de edição da HostGator ou em plataformas como CodePen.

Conclusão e próximos passos

Com as informações deste conteúdo, você viu como centralizar uma imagem no CSS de diferentes formas, de modos tradicionais a opções mais modernas. A partir disso, faça testes e escolha uma técnica para posicionar fotos em suas páginas.

Quer continuar aprendendo? Confira esses outros conteúdos no blog da HostGator:

• Tailwind CSS: O Guia Definitivo Para Começar do Zero
• Do HTML aos dias atuais: a evolução do web design
• As 29 Melhores Ferramentas de Web Design e Construção de Sites