📌 COMO CENTRALIZAR CONTEÚDO COM FLEXBOX (do jeito certo)
Uma dúvida muito comum: como centralizar algo dentro de uma div, tanto na vertical quanto na horizontal?
Se você já tentou usar margin, text-align ou outras alternativas, o Flexbox resolve isso de forma simples e elegante.
Abaixo, o código completo do exemplo que usaremos para uma melhor compreensão:
💡 A solução mais prática
.sidebar {
display: flex;
justify-content: center; /* horizontal */
align-items: center; /* vertical */
text-align: center;
}
🧠 Entendendo rapidamente
display: flex→ ativa o Flexboxjustify-content: center→ centraliza na horizontalalign-items: center→ centraliza na vertical
📦 Foco do exemplo
<aside class="sidebar">
<div>
<h3>Barra Lateral</h3>
<p>Conteúdo centralizado</p>
</div>
</aside>
.sidebar {
display: flex;
justify-content: center;
align-items: center;
height: 200px; /* necessário para centralizar verticalmente */
background: #ddd;
}
⚠️ Dica importante
Para a centralização vertical funcionar, a div precisa ter uma altura definida (height) ou ocupar todo o espaço do elemento pai.
🔥 Alternativa ainda mais simples (CSS Grid)
.sidebar {
display: grid;
place-items: center;
}
✔️ Uma linha só
✔️ Mesmo resultado
💬 Resumo:
Se você quer centralizar qualquer coisa dentro de uma div, Flexbox (ou Grid) é o caminho mais moderno, limpo e confiável.
