Como centralizar uma imagem vertical e horizontalmente com CSS

Muitos desenvolvedores lutam para trabalhar com imagens. Lidar com a capacidade de resposta e o alinhamento é particularmente difícil, especialmente centralizar uma imagem no meio da página.

Portanto, neste post, mostrarei algumas das maneiras mais comuns de centralizar uma imagem tanto vertical quanto horizontalmente usando diferentes propriedades CSS.

Eu examinei as propriedades CSS Position e Display em meu post anterior. Se você não está familiarizado com essas propriedades, recomendo verificar essas postagens antes de ler este artigo.

Aqui está uma versão em vídeo, se você quiser dar uma olhada:

Centralizando uma imagem horizontalmente

Vamos começar centralizando uma imagem horizontalmente usando 3 propriedades CSS diferentes.

Alinhamento de texto

A primeira maneira de centralizar uma imagem horizontalmente é usando a text-alignpropriedade. No entanto, esse método só funciona se a imagem estiver dentro de um contêiner de nível de bloco, como :

 div { text-align: center; } 

Margem: Auto

Outra maneira de centralizar uma imagem é usando a margin: autopropriedade (para margem esquerda e margem direita).

No entanto, usar margin: autosozinho não funcionará com imagens. Se você precisar usar margin: auto, existem 2 propriedades adicionais que você também deve usar.

A propriedade margin-auto não tem nenhum efeito nos elementos de nível embutido. Como a tag é um elemento embutido, precisamos primeiro convertê-la em um elemento de nível de bloco:

img { margin: auto; display: block; }

Em segundo lugar, também precisamos definir uma largura. Portanto, as margens esquerda e direita podem ocupar o resto do espaço vazio e se alinhar automaticamente, o que resolve o problema (a menos que forneçamos uma largura de 100%):

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

Display: Flex

A terceira maneira de centralizar uma imagem horizontalmente é usando display: flex. Assim como usamos a text-alignpropriedade para um contêiner, usamos display: flexpara um contêiner também.

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

div { display: flex; justify-content: center; } img { width: 60%; }

A justify-contentpropriedade trabalha em conjunto com a display: flexqual podemos usar para centralizar a imagem horizontalmente.

Por fim, a largura da imagem deve ser menor que a largura do container, caso contrário, ele ocupa 100% do espaço e não podemos centralizá-lo.

Importante: a display: flexpropriedade não é compatível com versões anteriores de navegadores. Veja aqui para mais detalhes.

Centralizando uma imagem verticalmente

Display: Flex

Para alinhamento vertical, usar display: flexnovamente é realmente útil.

Considere um caso em que nosso contêiner tem uma altura de 800 px, mas a altura da imagem é de apenas 500 px:

div { display: flex; justify-content: center; height: 800px; } img { width: 60%; height: 500px; }

Agora, neste caso, adicionar uma única linha de código ao contêiner align-items: center, resolve o problema:

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

A align-itemspropriedade pode posicionar os elementos verticalmente se usada junto com display: flex.

Posição: Propriedades absolutas e de transformação

Outro método para alinhamento vertical é usar as propriedades positione transformjuntas. Este é um pouco complicado, então vamos fazer isso passo a passo.

Etapa 1: definir a posição absoluta

Em primeiro lugar, mudamos o comportamento de posicionamento da imagem de staticpara absolute:

div { height: 800px; position: relative; background: red; } img { width: 80%; position: absolute; }

Além disso, ele deve estar dentro de um contêiner relativamente posicionado, por isso adicionamos position: relativeao seu contêiner div.

Etapa 2: Definir as propriedades superior e esquerda

Em segundo lugar, definimos as propriedades superior e esquerda da imagem e as configuramos para 50%. Isso moverá o ponto inicial (canto superior esquerdo) da imagem para o centro do contêiner:

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

Etapa 3: Definir a propriedade de transformação

Mas a segunda etapa moveu a imagem parcialmente para fora de seu contêiner. Portanto, precisamos trazê-lo de volta para dentro.

Definir uma transformpropriedade e adicionar -50% aos seus eixos X e Y resolve:

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

Existem outras maneiras de centralizar as coisas horizontal e verticalmente, mas já expliquei as mais comuns. Espero que este post tenha ajudado você a entender como alinhar suas imagens no centro da página.

Se você quiser saber mais sobre Desenvolvimento Web, fique à vontade para visitar meu canal no Youtube para mais informações.

Obrigado por ler!