Como centralizar uma `div` em CSS

Como centralizar elementos

• Posicionar um elemento no centro dentro do elemento pai foi, durante muito tempo, um problema complicado.
• Com a evolução do CSS, surgiram várias soluções, e hoje há uma ampla gama de opções.
• Este tutorial ajuda a entender os trade-offs entre diferentes abordagens e oferece estratégias para lidar com centralização em praticamente qualquer cenário.

Centralização com margens automáticas

• Quando você quer centralizar um elemento horizontalmente, pode usar margens com valor auto.
• É preciso limitar a largura do elemento, e fit-content faz com que ele ajuste seu tamanho ao conteúdo.
• A propriedade margin-inline permite definir margin-left e margin-right como auto ao mesmo tempo.

Centralização com Flexbox

• O Flexbox oferece bastante controle para distribuir grupos de itens ao longo do eixo principal.
• É possível centralizar um único elemento na horizontal e na vertical, e a centralização continua funcionando mesmo quando os elementos filhos não cabem no contêiner.
• A propriedade flex-direction permite controlar a direção de empilhamento de vários elementos filhos.

Centralização dentro da viewport

• Em alguns casos, é necessário centralizar o elemento dentro da viewport, e não do contêiner pai.
• Com position: fixed e inset: 0px, é possível fixar o elemento na viewport e usar margin: auto para centralizá-lo horizontal e verticalmente.

Centralização de elementos com tamanho desconhecido

• Quando o tamanho do elemento não é conhecido explicitamente, fit-content pode ser usado para encolhê-lo de acordo com o conteúdo.

Centralização com CSS Grid

• A forma mais concisa de centralizar um elemento horizontal e verticalmente com CSS Grid é usar a propriedade place-content: center.

Diferenças em relação ao Flexbox

• O CSS Grid usa um algoritmo de layout diferente, e em alguns casos essa complexidade extra pode se tornar um problema.
• Enquanto o Flexbox calcula porcentagens com base no elemento pai, o CSS Grid faz esse cálculo com base na célula da grade.

Centralização de pilhas de elementos

• Com CSS Grid, é possível atribuir vários elementos à mesma célula, fazendo com que eles se empilhem de trás para frente.

Centralização de texto

• O texto recebe um tratamento especial em CSS, e pode ser centralizado com a propriedade text-align.

O futuro da centralização

• A propriedade align-content também está sendo implementada no layout Flow, o que permitirá controlar o alinhamento do conteúdo na direção de bloco.

Além dos padrões

• Ao entender CSS em profundidade, é possível resolver problemas com intuição, em vez de depender apenas da memória.

Como decidir qual método usar

• Se você quer centralizar horizontalmente um único elemento, pode usar a estratégia de margens automáticas do layout Flow.
• Para centralizar uma interface flutuante, como um modal ou banner, é possível usar layout posicionado com margens automáticas.
• Para centralizar uma pilha de elementos, pode-se usar CSS Grid.
• Para centralizar texto, text-align pode ser usado sozinho ou em conjunto com outras técnicas.
• Na maioria dos outros casos, o Flexbox é a melhor opção. É o método mais versátil para centralizar um ou vários filhos na horizontal e na vertical.

Opinião do GN⁺

• O ponto mais importante deste texto é ajudar na compreensão dos diferentes métodos de centralização em CSS.
• Com a evolução do CSS, tarefas de centralização que antes eram complexas ficaram muito mais simples, o que ajuda bastante os desenvolvedores web.
• Entender e usar tecnologias modernas de CSS, como Flexbox e CSS Grid, tornou-se uma habilidade essencial para design e layout na web.

[v08zbv8fvlkjasdflkj]

Pensando bem, de repente me incomodou que até no GeekNews os artigos não estejam centralizados... aff, rs

[joyfui]

Tenho usado bastante place-items: center;, mas há vários outros métodos também.

[GN⁺]

Comentários no Hacker News

• Resumo do primeiro comentário:

  • Há várias opiniões sobre por que é difícil centralizar elementos com CSS.
  • Quando a maioria das pessoas pergunta por que a centralização é difícil, geralmente está apenas querendo saber como colocar um elemento exatamente no centro de outro.
  • No HTML antigo, era fácil centralizar usando a tag <table>, mas no CSS isso parece mais difícil.
  • É frustrante que o CSS seja considerado uma ferramenta melhor e, ainda assim, nem a centralização básica tenha sido fácil por muito tempo.
  • Por esse motivo, layouts com tabela foram usados durante muito tempo.
  • Mesmo assim, a pessoa gosta de CSS.

• Resumo do segundo comentário:

  • Muitas pessoas não entendem a complexidade do layout e da formatação automáticos de páginas.
  • Não é possível abstrair essa complexidade de forma simples como um “faça do jeito que eu quero”.
  • O site de Gwern Branwen é citado como exemplo de como é importante limitar o conteúdo para que ele se ajuste ao estilo desejado.
  • O layout de páginas web é um processo complexo de apresentar conteúdo em vários tipos de tela.
  • O CSS pode parecer complicado para quem decide criar páginas web do zero, mas na prática ele oferece muitas opções.
  • É necessário encontrar a ferramenta adequada para obter o resultado desejado e empacotar o conteúdo no formato apropriado.

• Resumo do terceiro comentário:

  • Entender o box model ajuda a compreender posicionamento e centralização em CSS.
  • As propriedades display e position são a base para aprender posicionamento.
  • Há um artigo útil sobre isso no MDN.

• Resumo do quarto comentário:

  • O artigo é muito bom, especialmente a parte interativa.
  • A pessoa usa há muito tempo um site que mostra formas fáceis de centralizar elementos em CSS.

• Resumo do quinto comentário:

  • “Centralizar” em CSS é um problema clássico.
  • O CSS não é claro porque é um agregado complexo projetado por vários comitês ao mesmo tempo.
  • O CSS existe como um conjunto de módulos individuais em constante mudança.
  • Essa não é uma forma desejável de desenvolver software.

• Resumo do sexto comentário:

  • Mesmo após décadas, o CSS não apresentou uma forma tão eficaz quanto tabelas para centralizar tabelas.
  • Durante esse período, usar tabelas para layout passou a ser visto como algo vergonhoso.

• Resumo do sétimo comentário:

  • Muitas pessoas têm queixas sobre CSS.
  • O principal problema é que instruções de estilo entram em conflito entre si ou falham sem produzir qualquer efeito.

• Resumo do oitavo comentário:

  • Como o artigo menciona, o Flexbox resolve o problema de centralização nos casos simples.
  • Se o Flexbox não resolve, é porque a tarefa é mais complexa do que uma simples centralização.

• Resumo do nono comentário:

  • O principal método dessa pessoa para centralizar é usar position: absolute, left: 50%, transform: translateX(-50%).

• Resumo do décimo comentário:

  • A dificuldade extrema de centralizar uma div com CSS foi o motivo de a pessoa desistir do desenvolvimento web.