Elementos
Console
Fontes
Rede
×
Estilos
display : block
align-content : center /* O TRUQUE */
Calculado : center
element.style
Pré-visualização
Conteúdo
Centralizado
display: block; align-content: center;
Console
Elementos
Fontes
×
O Problema
Centralizar verticalmente em CSS sempre foi difícil
// Toda solução exigiu um hack:
01
Posicionamento Absoluto
position: absolute; top: 50%; transform: translateY(-50%)
02
Célula de Tabela
display: table-cell; vertical-align: middle
03
Flexbox (Exagero)
display: flex; align-items: center; justify-content: center
Console
Elementos
×
Velhos Hacks — Código
#1 position: absolute; top: 50%; transform: translateY(-50%);
#2 display: table-cell; vertical-align: middle;
#3 display: flex; align-items: center; justify-content: center;
// Tudo funciona — mas são exageros para centralização simples
Console
Fontes
×
A Solução
✓ align-content em Elementos Bloco
element {
display: block;
align-content: center;
}
Uma propriedade. Sem wrappers. Sem hacks.
Elementos
Console
×
Pré-visualização ao Vivo
display : block
align-content : center
height : 500px
Saída Renderizada
Conteúdo
Centralizado
display: block; align-content: center;
Fontes
Console
×
Como Funciona
// Quando um elemento bloco tem uma altura maior
// que o seu conteúdo, align-content controla
// como as caixas de linha são agrupadas.

align-content: center; /* centraliza o conteúdo verticalmente */

// A área de conteúdo se torna um contêiner
// multi-linha internamente. align-content
// distribui as caixas de linha dentro dele.
Rede
Console
×
Suporte de Navegadores
✓ Chrome 117+
✓ Edge 117+
✓ Firefox 117+
✓ Safari 17+
// CSS Box Alignment Level 4
// align-content em elementos bloco
Console
×
Uma Propriedade.
Sem Wrappers.
Sem Hacks.
display: block; + align-content: center;
element { display: block; align-content: center; }