Artigo original escrito por Cem Eygi
Artigo original: How to Center an Image Vertically and Horizontally with CSS
Traduzido e adaptado por Daniel Rosa

Muitos desenvolvedores têm dificuldades ao trabalhar com imagens. Tratar de responsividade e alinhamento são tópicos particularmente difíceis, especialmente no que diz respeito a centralizar uma imagem no meio da página.

Neste artigo, portanto, mostrarei algumas das maneiras mais comuns de centralizar uma imagem na vertical e na horizontal usando propriedades diferentes do CSS.

Em artigos anteriores, examinei as propriedades position e display do CSS. Se você não esta familiarizado com essas propriedades, recomendo dar uma olhada esses artigos  (em inglês) antes de ler este aqui.

Aqui, temos uma versão em vídeo, caso você queira conferir:

Centralizando uma imagem na horizontal

Comecemos centralizando uma imagem na horizontal usando 3 propriedades diferentes do CSS.

Text-Align

A primeira forma de centralizar uma imagem na horizontal é usando a propriedade text-align. No entanto, este método só funciona se a imagem estiver dentro de um contêiner no nível de bloco, como uma <div>:

<style>
  div {
    text-align: center;
  }
</style>

<div>
  <img src="your-image.jpg">
</div>

Margin: Auto

Outra forma de centralizar uma imagem é usando a propriedade margin: auto (para as margens esquerda e direita).

Simplesmente usar margin: auto, contudo, não funcionará com imagens. Se você precisar usar margin: auto, há 2 outras propriedades que você também precisará usar.

A propriedade margin-auto não causa efeitos em elementos em nível em linha (inline). Como a tag <img> é um elemento inline, precisamos primeiro convertê-la para um elemento em nível de bloco:

img {
  margin: auto;
  display: block;
}

Em segundo lugar, precisamos definir uma largura (width). Dessa forma, as margens da direita e da esquerda podem usar o resto do espaço vazio e fazer seu próprio autoalinhamento, o que resolve o problema (a menos que coloquemos na imagem uma largura de 100%):

img {
  width: 60%;
  margin: auto;
  display: block;
}

Display: Flex

A terceira forma de centralizar uma imagem na horizontal é usando display: flex. Assim como utilizamos a propriedade text-align para um contêiner, também precisamos usar display: flex para um contêiner.

Porém, usar display: flex simplesmente não será o bastante. O contêiner deve ter uma propriedade adicional chamada justify-content:

div {
  display: flex;
  justify-content: center;
}

img {
  width: 60%;
}

A propriedade justify-content funciona juntamente com a propriedade display: flex, e podemos usar ambas para centralizar a imagem na horizontal.

Por fim, a largura da imagem deve ser menor do que a do contêiner. Senão, ela ocupará 100% do espaço e não poderemos centralizá-la.

Importante: A propriedade display: flex não funciona em versões mais antigas dos navegadores. Aqui você vê mais detalhes sobre isso (em inglês).

Centralizando uma imagem na vertical

Display: Flex

Para o alinhamento vertical, usar display: flex é muito útil outra vez.

Considere um caso onde nosso contêiner tem uma altura (height) de 800px, mas a altura da imagem é de apenas 500px:

div {
  display: flex;
  justify-content: center;
  height: 800px;
}

img {
  width: 60%;
  height: 500px;
}

Neste caso, adicionar uma única linha de código ao contêiner, align-items: center, já resolve a questão:

div {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 800px;
}

A propriedade align-items pode posicionar os elementos na vertical se usados em conjunto com display: flex.

As propriedades Position: Absolute e Transform

Outro método para o alinhamento vertical é usar as propriedades position e transform juntas. Essa é um pouco mais complicada, então faremos isso passo a passo.

Passo 1: Definir Position: Absolute

Primeiro, mudamos o comportamento de posicionamento da imagem, de static para absolute:

div {
  height: 800px;
  position: relative;
  background: red;
}

img {
  width: 80%;
  position: absolute;
}

Além disso, ela precisa estar dentro de um contêiner de posicionamento relativo. Por isso, adicionamos position: relative à div que serve de contêiner para a imagem.

Passo 2: Definir as propriedades Top e Left

Em segundo lugar, definimos as propriedades top e left da imagem, ambas como 50%. Isso moverá o ponto de início (top-left) da imagem para o centro do contêiner:

img {
  width: 80%;
  position: absolute;
  top: 50%;
  left: 50%;
}

Passo 3: Definir a propriedade Transform

O segundo passo, porém, moveu a imagem parcialmente para fora de seu contêiner. Por isso, precisamos trazê-la de volta para dentro.

Definindo a propriedade transform e adicionando -50% aos seus eixos X e Y, resolvemos o problema:

img {
  width: 80%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

Há outras formas de centralizar elementos na horizontal e na vertical, mas expliquei aqui os mais comuns. Espero que este artigo ajude você a entender como alinhar imagens ao centro da página.

Se quiser aprender mais sobre Desenvolvimento para a Web, visite o canal do autor no Youtube para saber mais.

Obrigado por sua leitura!