Como centralizar elementos com CSS?

uma das coisas mais difíceis no começo dos estudos em CSS é entender como os posicionamentos funcionam, mas afinal, como que posso centralizar os elementos?

Marcos Sanches

2 min

uma das coisas mais difíceis no começo dos estudos em CSS é entender como os posicionamentos funcionam, mas afinal, como posso centralizar os elementos?

A resposta não é tão simples, depende...

Tipos de displays.

Não vou citar todos os tipos de display, mas citarei os mais comuns.

Centralização com display flex;

com o display flex, alinhar os objetos facilita muito. vale lembrar que o que deve ser definido com o display:flex; é o elemento pai, e não o elemento a ser centralizado.

exemplo:


          
            <div class="quadrado"></div>
          
          
            <style>body{
          
          
              display:flex;
          
          
              justify-content:center;
          
          
              align-items:center;
          
          
              height:100vh;
          
          
            }
          
          
            .quadrado{
          
          
              
          
          
              width:100px;
          
          
              height:100px;
          
          
              background:red;
          
          
            }</style>

no exemplo acima o justify-content serve para alinhar o objeto horizontalmente, e o align-items serve para alinhar verticalmente.

Centralização com display block;

com display block fica um pouquinho mais complicado, mas também é possível. no caso o elemento deverá ter o position:absolute; para que seja possível manipulá-lo corretamente, exemplo:


          
            <div class="quadrado"></div>
          
          
            
          
          
            <style>
          
          
            body{
          
          
              display:block;
          
          
              width:100%;
          
          
              height:100vh;
          
          
            }
          
          
            .quadrado{
          
          
              width:100px;
          
          
              height:100px;
          
          
              background:red;
          
          
              position:absolute;
          
          
              top:50%;
          
          
              left:50%;
          
          
              transform:translate(-50%,-50%);
          
          
            }
          
          
            </style>

Com o posicionamento absoluto, nós podemos manipular a distância entre o elemento e o elemento pai, no caso 50% de margem no topo e 50% de margem na esquerda.

Acontece que essa margem é dada nas bordas do elemento, o que faz o mesmo ficar torto. para dar o desconto do tamanho do objeto nós colocamos o transform:translate(-50%,-50%). no caso estamos dizendo para o elemento descontar 50% da sua própria altura e largura, no topo e na esquerda, para fazer o ajuste de acordo com o centro do elemento.

Espero que seja útil!

Learn

Support

More Options