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:

Download aqui

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 Flexbox
• justify-content: center → centraliza na horizontal
• align-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!