3 maneiras fáceis de centralizar um elemento com CSS

Precisa centralizar um elemento HTML e não sabe por onde começar? Confira essas técnicas.

Principais conclusões

Centralizar elementos em layouts web sempre foi um desafio, mas o CSS moderno agora suporta fácil posicionamento central.
Flexbox é o método mais utilizado para centralizar elementos, fornecendo um modelo de layout flexível que permite fácil alinhamento.
CSS Grid e posicionamento CSS também são métodos eficazes para centralizar elementos em uma página da web, oferecendo controle preciso sobre layout e alinhamento.

Centralizar um elemento em seu layout web é um desafio que sempre frustrou os designers. Nem sempre foi fácil de fazer, mas muitos projetos exigem posicionamento central. Felizmente, o CSS moderno agora tem um bom suporte para centralização.

Aprenda como centralizar um div horizontalmente e verticalmente usando Flexbox, CSS Grid e posicionamento CSS.

Um arquivo HTML simples para praticar a centralização

Todos os exemplos a seguir usam um documento HTML mínimo para demonstrar a centralização com CSS. Use esta marcação e varie o CSS de acordo com cada seção para ver como essas propriedades se comportam.

<!DOCTYPE html>
<html>
<head>
  <style>
  div { width: 100px; height: 100px; }
 body { height: calc(100vh - 16px); }
  </style>
</head>
<body>
  <div></div>
</body>
</html>

Usando Flexbox para centralizar um elemento Div

Você precisará entender os fundamentos do Flexbox antes de usá-lo para centralizar um elemento div. Felizmente, o Flexbox segue uma abordagem simples, por isso é o mais utilizado. Ele fornece um modelo de layout flexível que facilita o alinhamento e a distribuição de espaço entre os itens de um contêiner, tornando-o ideal para centralizar elementos.

Use o seguinte CSS para obter centralização com Flexbox.

Coloque seu elemento div em um contêiner. Aplique a propriedade display: flex ao contêiner para ativar o layout Flexbox. Em um caso de teste simples, o body pode servir como um contêiner:
```
body {
  display: flex;
}
```
Use as propriedades justify-content e align-items para alinhar itens ao longo do eixo principal (horizontal) e do eixo cruzado (vertical), respectivamente. Para centralizar ambos os eixos, defina estas propriedades como center. Para uma demonstração simples, você também deve definir a altura do corpo para 100vh, para poder ver o efeito do alinhamento vertical.
```
body {
  justify-content: center;
  align-items: center;
}
```
Dê ao div uma cor de fundo para visualizar seu posicionamento na página final:
```
div { background-color: red; }
```

Visualizando o resultado no DevTools do Google Chrome, você pode ver como as duas propriedades controlam o alinhamento ao longo de cada eixo:

Usando grade CSS para centralizar um elemento Div

Usar CSS Grid para centralizar um elemento é outro método eficaz, oferecendo controle preciso sobre layout e alinhamento.

Defina um contêiner para seu layout e aplique o estilo display: grid para ativar CSS Grid. Neste caso, o corpo serve de recipiente.
```
body {
  display: grid;
}
```
Use as propriedades grid-template-columns e grid-template-rows para definir a estrutura da sua grade. Para centralizar, uma única coluna e linha serão suficientes, então use 1fr para ambas.
```
body {
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
}
```
Use a propriedade place-items para centralizar o conteúdo da grade, tanto horizontal quanto verticalmente.
```
body {
  place-items: center;
}
```
Estilize o plano de fundo do seu elemento div para visualizá-lo no centro do contêiner da grade.
```
div {
  background-color: blue;
}
```

Nesse caso, uma única propriedade controla o posicionamento central da div na sua página:

Usando posicionamento CSS para centralizar um elemento Div

Para usar a propriedade CSS position para centralizar um div, você também precisa entender como funcionam as transformações CSS com transições. Aqui está um guia passo a passo com um exemplo.

Para posicionar o elemento div, certifique-se de que seu contêiner tenha uma posição relativa. Isso estabelece um contexto de posicionamento relativo, para que você possa colocar o div no centro do seu contêiner.
```
body {
  position: relative;
}
```
Aplique posicionamento absoluto ao elemento div e use as propriedades top e left para posicionar o canto superior esquerdo do div exatamente no centro de seu contêiner.
```
div {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
 background-color: green;
}
```

Este método funciona primeiro centralizando o canto superior do elemento e, em seguida, movendo-o relativamente pela metade de sua largura e metade de sua altura.

Flexbox, CSS Grid e posicionamento CSS são ferramentas poderosas que você pode usar para centralizar elementos em uma página da web. Com o Flexbox, você pode centralizar horizontal e verticalmente com apenas algumas linhas de código. CSS Grid fornece alinhamento poderoso em duas dimensões, e você pode usar o posicionamento CSS para centralizar um elemento em relação ao seu contêiner pai.