Como centralizar uma imagem na vertical e horizontal com CSS

Aprenda a centralizar imagens usando CSS com técnicas como Flexbox, position: absolute e margin: auto. Descubra exemplos práticos para alinhar horizontalmente, verticalmente ou em ambos os eixos, garantindo responsividade e eficiência no design web.
Imagem em css

Precisa aprender programação de uma vez por todas? Então conheça o curso mais completo do Brasil. Clique abaixo e saiba mais!

Centralizar elementos em uma página, especialmente imagens, é uma das habilidades mais úteis no desenvolvimento web. Neste artigo, você aprenderá várias maneiras de centralizar uma imagem na vertical, horizontal ou em ambos os eixos usando CSS.

Vamos conhecer diferentes métodos com exemplos práticos para que você possa aplicar em seus projetos de maneira eficiente.

Um curso,
uma nova experiência!
Conheça a #formaçãojava

Curso FULL STACK do básico ao avançado para você iniciante em Java Web e Spring Boot REST.

Um curso,
uma nova experiência!
Conheça a #formaçãojava

Curso FULL STACK do básico ao avançado para você iniciante em Java Web e Spring Boot REST.

NÃO desista de aprender programação ainda em 2024!

Aprenda a programar ainda em 2024 com o melhor curso de programação do mercado
com um MEGA DESCONTO.

Centralizar uma imagem na horizontal

Centralizar uma imagem horizontalmente pode ser feito com diferentes técnicas em CSS. Veja as principais abordagens abaixo:

Usando text-align: center

Este método é útil quando a imagem está dentro de um contêiner como uma <div>. O estilo é aplicado diretamente ao contêiner.

<div style=”text-align: center;”>

  <img src=”imagem.jpg” alt=”Imagem centralizada”>

</div>

Usando margin: auto

Para usar este método, é necessário que a imagem seja um bloco ou esteja dentro de um contêiner com display configurado como block.

<img src=”imagem.jpg” alt=”Imagem centralizada” style=”display: block; margin: auto;”>

Usando display: flex

O Flexbox é uma das maneiras mais modernas e versáteis de centralizar elementos.

<div style=”display: flex; justify-content: center;”>

  <img src=”imagem.jpg” alt=”Imagem centralizada”>

</div>

Centralizar uma imagem na vertical

Centralizar verticalmente requer técnicas específicas dependendo do contexto. Abaixo, exploramos as opções mais eficazes.

Usando display: flex

Com o Flexbox, centralizar uma imagem na vertical é simples. Adicione align-items: center ao contêiner.

<div style=”display: flex; align-items: center; height: 100vh;”>

  <img src=”imagem.jpg” alt=”Imagem centralizada”>

</div>

Usando position: absolute e transform

Este método é ideal quando você deseja um controle absoluto sobre a posição do elemento.

<div style=”position: relative; height: 100vh;”>

  <img src=”imagem.jpg” alt=”Imagem centralizada” style=”position: absolute; top: 50%; transform: translateY(-50%);”>

</div>

Passo a passo: Definir position e propriedades de alinhamento

  1. Configure o contêiner como position: relative.
  2. Aplique position: absolute na imagem.
  3. Use top: 50% e transform: translateY(-50%) para centralizar verticalmente.

Centralizar uma imagem na vertical e horizontal ao mesmo tempo

Para centralizar uma imagem em ambos os eixos, você pode combinar métodos.

Usando Flexbox

<div style=”display: flex; justify-content: center; align-items: center; height: 100vh;”>

  <img src=”imagem.jpg” alt=”Imagem centralizada”>

</div>

Usando position: absolute e transform

<div style=”position: relative; height: 100vh;”>

  <img src=”imagem.jpg” alt=”Imagem centralizada” style=”position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);”>

</div>

Exemplos práticos de código

Exemplo 1: Centralizar com Flexbox

<div style=”display: flex; justify-content: center; align-items: center; height: 100vh; background-color: #f0f0f0;”>

  <img src=”imagem.jpg” alt=”Imagem centralizada”>

</div>

Exemplo 2: Centralizar com position e transform

<div style=”position: relative; height: 100vh; background-color: #f0f0f0;”>

  <img src=”imagem.jpg” alt=”Imagem centralizada” style=”position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);”>

</div>

Dicas para evitar problemas de centralização em CSS

  1. Considere o contexto do layout: Certifique-se de que o método escolhido é compatível com o design geral da página.
  2. Testar em diferentes resoluções: Verifique se a centralização funciona em telas pequenas e grandes.
  3. Use valores relativos sempre que possível: Propriedades como vh, %, e em ajudam a manter a responsividade.
  4. Valide seu CSS: Utilize ferramentas como o W3C Validator para garantir a compatibilidade com navegadores.

Com essas técnicas, centralizar uma imagem na vertical e horizontal usando CSS se torna uma tarefa simples e eficiente. Escolha o método que melhor se adapta ao seu projeto e aplique as dicas para evitar problemas comuns.

Esse artigo foi útil para você? 🤔
Deixe seu comentário!

Pedro Galvão

Estudo e trabalho com programação/ tecnologia há mais de 5 anos. Iniciei na carreira de programação como Front-end e migrei para a área de SEO com foco na parte técnica, cuidando da estrutura do site, performance e afins.

Compartilhe

Conheça os melhores
cursos de programação!

Conheça os melhores cursos de programação do mercado e de um up na carreira.

Você também pode gostar

Deixe um comentário

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *

Rolar para cima
logo

NÃO desista de aprender programação ainda em 2024!

Aprenda a programar ainda em 2024 com o melhor curso de programação do mercado com um MEGA DESCONTO.