Executando verificação de segurança...
Em resposta a [Dica] Acabou o choro! Guia definitivo para centralizar uma div
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>
Carregando publicação patrocinada...
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
Autor
Autor

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
Autor
Autor

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