Show cara, então vamos ajudar o brother aqui e coloca como seria a melhor forma de centralizar essa div, achei massa seus pontos.
Respondendo a "Só uns comentários sobre o código: O body de um..." dentro da publicação [Dica] Acabou o choro! Guia definitivo para centralizar uma div
1
2
1
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
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
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!