Executando verificação de segurança...
7
ojoquinhaa
3 min de leitura ·

[Dica] Acabou o choro! Guia definitivo para centralizar uma div

Centralizar uma div é uma tarefa essencial para qualquer desenvolvedor web. É uma habilidade que você vai precisar usar o tempo todo, e é importante saber como fazer isso da maneira certa.

Existem muitas maneiras de centralizar uma div, mas nem todas são criadas iguais. Algumas são mais fáceis de usar, enquanto outras são mais flexíveis. Algumas são mais suportadas por navegadores, enquanto outras são mais avançadas.

Neste guia, vamos mostrar a você todas as maneiras diferentes de centralizar uma div. Vamos começar com os métodos mais simples e terminar com os mais avançados.

1. Usando margin: 0 auto

Este é o método mais simples para centralizar uma div. Basta adicionar as propriedades margin: 0 auto ao CSS da sua div. Isso irá centralizar a div horizontalmente na página.

div {
  margin: 0 auto;
}

Este método é muito simples de usar, mas tem uma desvantagem: ele só centraliza a div horizontalmente. Se você precisar centralizar a div verticalmente também, precisará usar um método diferente.

2. Usando display: flex

O flexbox é uma maneira mais flexível de centralizar uma div. Ele permite que você centralize a div horizontal e verticalmente, e também pode ser usado para centralizar outros elementos na página.

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

O flexbox é um método mais avançado que o margin: 0 auto, mas é também mais flexível. Ele pode ser usado para criar layouts mais complexos e sofisticados.

3. Usando position: absolute

A posição absoluta é uma maneira mais avançada de centralizar uma div. Ela permite que você centralize a div em relação ao seu pai, e também pode ser usada para criar efeitos mais complexos.

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

A posição absoluta é um método muito avançado, mas também é muito poderoso. Ele pode ser usado para criar layouts muito complexos e sofisticados.

4. Usando float

O float é um método mais antigo de centralizar uma div. Ele pode ser usado para centralizar a div horizontalmente, mas não verticalmente.

div {
  float: left;
  margin-right: 50%;
}

O float é um método muito simples de usar, mas tem uma desvantagem: ele não é muito suportado por navegadores.

5. Usando grid

O grid é um novo layout que foi introduzido no CSS 12. Ele permite que você crie um layout mais complexo e flexível, e também pode ser usado para centralizar elementos na página.

div {
  display: grid;
  place-items: center;
}

O grid é um método muito novo, mas é também muito poderoso. Ele pode ser usado para criar layouts muito complexos e sofisticados.

Qual é o melhor método?

O melhor método para centralizar uma div depende das suas necessidades específicas. Se você precisa de uma solução simples que funcione em qualquer navegador, o método margin: 0 auto é a melhor opção. Se você precisa de uma solução mais flexível que permita centralizar a div horizontal e verticalmente, o flexbox é a melhor opção. Se você precisa de uma solução mais avançada que permita criar efeitos mais complexos, a posição absoluta é a melhor opção.

E você, qual é o seu método favorito para centralizar uma div?

Eu, pessoalmente, prefiro usar o flexbox. É um método muito flexível e poderoso, e pode ser usado para criar layouts muito complexos e sofisticados. Mas, se você precisar de uma solução simples que funcione em qualquer navegador, o método margin: 0 auto é a melhor opção.

E lembre-se: centralizar uma div não é tão difícil quanto parece!

Carregando publicação patrocinada...
2
cssgabriel

Uma opção alternativa para o margin: 0 auto é utilizar o margin-inline: auto. O efeito é o mesmo.
1º opção: margin: 0 auto

div {
  margin: 0 auto;
}

2º opção: margin-inline: auto

div {
  margin-inline: auto;
}
2
kht

Vale lembrar que nem sempre será equivalente. margin-inline trata apenas dos valores das margens esquerda e direita, enquanto margin também trata das margens superior e inferior.

Ou seja, se eu precisar ter uma margem superior e inferior diferente de zero, como por exemplo:

div {
    margin: 50px auto;
}

Aí somente margin-inline não é suficiente, eu precisaria fazer algo como:

div {
    margin-inline: auto;
    margin-top: 50px;
    margin-bottom: 50px;
}

Outra diferença é que margin-inline é afetado pela direcionalidade do texto. Por exemplo, se eu tiver:

div {
  writing-mode: vertical-lr;
  margin-inline: auto;
}

A div não é mais centralizada no meio da linha, veja.

Mas se eu usar:

div {
  writing-mode: vertical-lr;
  margin: 0px auto;
}

A div continua centralizada, veja.

-2
1
1
1
Lobo

E você, qual é o seu método favorito para centralizar uma div?

Sempre usei flexbox pois nunca tive grandes ploblemas com ele, mas achei bem interessante os outros métodos. Com certeza vou testá-los mais tarde.

0
1
0
FelipeBergamaschi

Pra mim sem dúvidas essa é a melhor maneira de centralizar uma div

<body>
  <div class="content" style="width: 200px; height: 200px; background: red;">
      <!-- Conteúdo da div -->
  </div>

  <script>
    function responsiveDiv() {
      const container = document.querySelector('body');
      const content = document.querySelector('.content');
      const maxWidth = 200;

      const windowWidth = window.innerWidth;
      const margin = (windowWidth - maxWidth) / 2;

      container.style.marginLeft = margin + 'px';
      container.style.marginRight = margin + 'px';
    }

    window.addEventListener('resize', responsiveDiv);
    responsiveDiv();
  </script>
</body>
4
kht

Só uns comentários sobre o código:

O body de um document pode ser acessado diretamente por document.body. Não há a necessidade de usar document.querySelector('body'). O atalho existe porque um document deve possuir apenas um body (conforme especificação).

Claro que tecnicamente é possível criar um HTML com dois ou mais body's, mas é sabido que os browsers costumam ser bem lenientes e "aceitar" HTML inválido. Só não espere que o JS se comporte corretamente em todos os casos.

Outro detalhe é que a variável content não é usada em nenhum lugar.

E por fim, se mudarmos a largura da div, isso já não funciona mais, veja. Neste caso, os outros métodos citados no post funcionam melhor.

1
2
kht

como seria a melhor forma de centralizar essa div

No post acima já tem várias formas, inclusive explica as diferenças e menciona casos em que uma é mais adequada que o outro.

Mas enfim, para complementar, veja aqui, aqui e aqui.

1
FelipeBergamaschi

No post acima já tem várias formas

Show de bola, para complementar seu argumento, trago aqui a correção do código centralizando a div corretamente com as suas sujestões.

<body>
    <div class="container">
      <div class="content"
        style="width: 50px; height: 200px; background: red;">
        abc
      </div>
    </div>

    <script>
      function responsiveDiv() {
        const container = document.querySelector('.container');
        const content = document.querySelector('.content');

        const maxWidth = parseInt(content.style.width, 10);

        const windowWidth = window.innerWidth;
        const margin = (windowWidth - maxWidth) / 2;

        container.style.marginLeft = margin + 'px';
        container.style.marginRight = margin + 'px';
      }

      window.addEventListener('resize', responsiveDiv);
      responsiveDiv();
    </script>
  </body>
2
kht

Bom, tem outros detalhes a se considerar.

Se tiver outras div's com classe content, elas não serão centralizadas. Isso porque querySelector só retorna o primeiro elemento que for encontrado. Claro que daria para usar querySelectorAll para trazer todas, mas eu ainda prefiro as soluções acima com CSS.

Acho que o JS seria útil em situações nas quais vc quer mudar o alinhamento dinamicamente. Por exemplo, a div começa alinhada à esquerda, e algum evento da página (um clique em algum elemento, por exemplo) faz com que ela fique centralizada. Aí um JS que altera o alinhamento faz todo o sentido.

Mas se for só para centralizar e pronto, eu acho que um simples CSS é mais que suficiente.

1
FelipeBergamaschi

Falando sério agora, eu concordo que o CSS é mais que suficiente para resolver os pontos mencionados acima, e que fazer isso com JS depende de casos especificos.

E lembre-se: centralizar uma div não é tão difícil quanto parece!

-1
-2
-1
0
krhyst

Nada a ver com o assunto.. apenas uma observação/elogio... É lindo o tanto que se ajudam por aqui.. ganha umas 10x do stackoverflow.. parabens a equipe e usuarios.. isso ta lindo sz

-2
0