CSS finalmente ganha “centralização vertical” em 2024

 (build-your-own.org)
35 pontos por xguru 2024-09-03 | 29 comentários | Compartilhar no WhatsApp
  • O CSS finalmente adicionou align-content ao layout padrão, tornando possível o alinhamento vertical com uma única propriedade CSS
    • Versões com suporte: Chrome 123, Firefox 125, Safari 17.4
  • Atualmente, align-content não funciona no layout padrão (flow), então era preciso mudar para flexbox ou grid
    • Em 2024, os navegadores finalmente implementaram align-content no layout Flow
    • Agora, é possível alinhar usando apenas 1 propriedade CSS, sem flexbox nem grid
    • Portanto, não é mais necessário envolver o conteúdo em uma div

História da centralização vertical

  • Durante muito tempo, não houve uma forma simples de fazer alinhamento vertical no navegador

Método 1: célula de tabela

  • Sanidade (fala sério?): ★★★☆☆
  • Existem 4 layouts principais: flow (padrão), table, flexbox e grid, e o alinhamento de conteúdo varia conforme o layout
  • Como flexbox e grid foram adicionados mais tarde, no começo usava-se table
<div style="display: table;">  
  <div style="display: table-cell; vertical-align: middle;">  
    Content.  
  </div>  
</div>

Método 2: posicionamento absoluto

  • Sanidade: ☆☆☆☆☆
  • Como o layout flow não ajudava, fazia-se uma gambiarra com posicionamento absoluto
<div style="position: relative;">  
  <div style="position: absolute; top: 50%; transform: translateY(-50%);">  
    Content.  
  </div>  
</div>

Método 3: conteúdo inline

  • Sanidade: ☆☆☆☆☆
  • O layout flow não ajuda no alinhamento de conteúdo. Ele permite alinhamento vertical dentro de uma única linha
  • Então, e se criarmos uma linha com a mesma altura do contêiner?
<div class="container">  
  ::before  
  <div class="content">Content.</div>  
</div>  

.container::before {  
  content: '';  
  height: 100%;  
  display: inline-block;  
  vertical-align: middle;  
}  
.content {  
  display: inline-block;  
  vertical-align: middle;  
}
  • Tem tudo para ficar esquisito

Método 4: flexbox de uma linha

  • Sanidade: ★★★☆☆
  • O flexbox só passou a ser amplamente usado mais de 20 anos depois do início da web
  • No modo de uma linha (padrão), a linha ocupa o espaço vertical e align-items alinha os itens dentro dela
<div style="display: flex; align-items: center;">  
  <div>Content.</div>  
</div>
  • Ou então tornar a linha vertical e usar justify-content para alinhar os itens
<div style="display: flex; flex-flow: column; justify-content: center;">  
  <div>Content.</div>  
</div>

Método 5: flexbox de várias linhas

  • Sanidade: ★★★☆☆
  • Em flexbox com várias linhas, é possível alinhar as linhas com align-content
<div style="display: flex; flex-flow: row wrap; align-content: center;">  
  <div>Content.</div>  
</div>

Método 6: conteúdo em grid

  • Sanidade: ★★★★☆
  • Como o grid surgiu ainda mais tarde, o alinhamento ficou um pouco mais simples
<div style="display: grid; align-content: center;">  
  <div>Content.</div>  
</div>

Método 7: célula de grid

  • Sanidade: ★★★★☆
  • align-content alinha a célula no contêiner, e align-items alinha o conteúdo dentro da célula
<div style="display: grid; align-items: center;">  
  <div>Content.</div>  
</div>

Método 8: margem auto

  • Sanidade: ★★★☆☆
  • No layout flow, margin:auto centraliza horizontalmente, mas não verticalmente
  • Flexbox e grid não compartilham essa inconsistência
<div style="display: grid;">  
  <div style="margin-block: auto;">  
    Content.  
  </div>  
</div>

Método 9: este post de 2024

  • Sanidade: ★★★★★
  • Era algo que os navegadores já deveriam ter adicionado desde o começo
<div style="align-content: center;">  
  <code>align-content</code> just works!  
</div>

Leituras relacionadas

29 comentários

 
tobesimple7 2024-10-17

Uau~ que recurso é esse~~
 
seunggi 2024-09-12

A coisa mais difícil na ciência da computação: centralizar no meio

https://tonsky.me/blog/centering/
 
mongsilsushi 2024-09-06

Finalmente!
 
sgwanlee 2024-09-04

o CSS ficou fácil demais, né? kkkkk
 
jwh926 2024-09-04

🙏🏻🙏🏻🙏🏻🙏🏻
 
rulerwithcss 2024-09-04

meu Deus, borda recheada de queijo
 
shpkc 2024-09-04

Finalmente!
 
halfenif 2024-09-04

Tá atrasado! Tá atrasado! Tá atrasado!
 
uoayop 2024-09-03

Finalmente.
 
aer0700 2024-09-03

Que alegria
 
koyokr 2024-09-03

kkkk
 
nemorize 2024-09-03

a-men
 
carnoxen 2024-09-03

Os sites existentes correm o risco de ter a estrutura bagunçada por causa dessa mudança?
 
bluekai17 2024-09-10

Eu também estou curioso sobre isso.
 
ng0301 2024-09-03

Finalmente!
 
yatmak 2024-09-03

Finalmente, chegamos à era da Web 3.0.
 
plaaat0102 2024-09-03

Os comentários estão cheios de diversão kkkkk...
 
godppun 2024-09-03

Sério, finalmente...
 
kangkung9225 2024-09-03

Ah...? Será que tenho que fazer isso mesmo? haha..
 
2024-09-03
[Este comentário foi ocultado.]
 
qurare 2024-09-03

Finalmente
 
savvykang 2024-09-03

UAAAA!!!
 
joyfui 2024-09-03

Uau!!!
 
mkyoon 2024-09-03

Tô felizão!
 
wedding 2024-09-03

Como trabalho principalmente com desenvolvimento de apps, quando ia ajudar em desenvolvimento web eu pesquisava sem pensar muito e usava o flexbox que aparecia, achando que aquilo já era o tal do alinhamento central... mas pelo visto isso não existia até agora. Chocante.....
 
illiil1lii 2024-09-03

Massa demais!
 
huiya 2024-09-03

Finalmente!
 
tjddnjsjo 2024-09-03

Que maravilha!
 
pkj3186 2024-09-03

Finalmente!