COMO CENTRALIZAR CONTEÚDO COM FLEXBOX
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;
}Code language: CSS (css)
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>Code language: HTML, XML (xml)
.sidebar {
display: flex;
justify-content: center;
align-items: center;
height: 200px; /* necessário para centralizar verticalmente */
background: #ddd;
}Code language: CSS (css)
⚠️ 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.
💬 Resumo:
Se você quer centralizar qualquer coisa dentro de uma div, Flexbox (ou Grid) é o caminho mais moderno, prático, limpo e confiável.
Até a próxima!
