Frontend

Centralizando tudo com o CSS!

09 de agosto de 2020
3 min de leitura

Introdução

Um dos maiores desafios para iniciantes no CSS, e talvez o seu recurso mais importante, é o posicionamento.

Os métodos de posicionamente em si geralmente não são difíceis de entender. Porém, o fato de existirem inúmeras maneiras de fazer isso pode causar confusão.

E foi pensando em resolver essa confusão que eu decidi escrever esse post. Vamos nessa!

Centralizando horizontalmente

Uma boa notícia é que centralizar elementos horizontalmente é geralmente mais fácil do que centralizá-los verticalmente. Em seguida vou abordar diferentes formas de fazer isso.

Centralizando um texto com o text-align

Para centralizar texto ou links horizontalmente, basta usar a propriedade text-align: center:

<div class="container">
  <p>Texto centralizado</p>
</div>

p {
  text-align: center;
}

O resultado será o seguinte:

Texto centralizado

Centralizando uma div com o margin auto

É possivel centralizar horizontalmente elementos usando um margin: 0 auto:

<div class="container">
  <div class="content"></div>
</div>

.content {
  margin: 0 auto;
}

O resultado será esse:

Centralizando uma div com o Flexbox

O Flexbox é um dos mais brilhantes recursos do CSS e o seu domínio garante um desenvolvimento muito mais tranquilo.

<div class="container">
  <div class="content"></div>
</div>

.container {
  ...
  display: flex;
  justify-content: center;
}

O resultado será esse:

Centralizando verticalmente

Antes do Flexbox era muito mais díficil centralizar um elemento na vertical, mas não achei relevante trazer esses modos para o post e decidi ir direto ao ponto.

Centralizando verticalmente com o Flexbox

Para isso, basta aplicarmos um display: flex e um align-items: center para o elemento pai.

<div class="container">
  <div class="content"></div>
</div>

.container {
  display: flex;
  justify-content: center;
}

O resultado será esse:

Centralizando horizontal e verticalmente

Bom, agora que você aprendeu como centralizar nos eixos x e y, vamos dar uma olhada em formas de fazer essa centralização tanto vertical quando horizontalmente.

Centralizando com o transform: translate

Primeiro, informe o display da div pai como relative e o display da div filho como absolute, informando um top e um left de 50%.

<div class="pai">
  <div class="filho"></div>
</div>

.pai {
  position: relative;
}

.filho {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

O resultado será esse:

Centralizando com o Flexbox

Agora entra em cena a magia do Flexbox, que torna o posicionamento no CSS muito mais fácil de ser realizado.

Após definirmos a div pai como display: flex, basta adicionarmos o align-items: center e o justify-content:center.

<div class="pai">
  <div class="filho"></div>
</div>

.pai {
  display: flex;
  justify-content: center;
  align-items: center;
}

O resultado será esse:

Conclusão

Por hora é só pessoal! Eu espero que com o post de hoje possa ter esclarecido algumas dúvidas do CSS.

Fique de olho também nos próximos posts sobre CSS, e se surgirem dúvidas ou sugestões, não deixem de mandar aí nos comentários!

Ah, e aqui você pode encontar o artigo em que me baseei para esse post.

Comentários