Como centralizar elementos verticalmente e horizontalmente no Flexbox
Abaixo estão duas soluções gerais de centralização.
Um para itens flexíveis alinhados verticalmente ( flex-direction: column) e outro para itens flexíveis alinhados horizontalmente ( flex-direction: row).
Nos dois casos, a altura dos divs centralizados pode ser variável, indefinida, desconhecida, qualquer que seja. A altura dos divs centralizados não importa.
Aqui está o HTML para ambos:
<div id="container"><!-- flex container -->
<div class="box" id="bluebox"><!-- flex item -->
<p>DIV #1</p>
</div>
<div class="box" id="redbox"><!-- flex item -->
<p>DIV #2</p>
</div>
</div>
CSS (excluindo estilos decorativos)
Quando os itens flexíveis são empilhados verticalmente:
#container {
display: flex; /* establish flex container */
flex-direction: column; /* make main axis vertical */
justify-content: center; /* center items vertically, in this case */
align-items: center; /* center items horizontally, in this case */
height: 300px;
}
.box {
width: 300px;
margin: 5px;
text-align: center; /* will center text in <p>, which is not a flex item */
}
DEMO
Quando os itens flexíveis são empilhados horizontalmente:
Ajuste a flex-directionregra do código acima.
#container {
display: flex;
flex-direction: row; /* make main axis horizontal (default setting) */
justify-content: center; /* center items horizontally, in this case */
align-items: center; /* center items vertically, in this case */
height: 300px;
}
DEMO
Centralizando o conteúdo dos itens flex
O escopo de um contexto de formatação flexível é limitado a um relacionamento pai-filho. Descendentes de um contêiner flex além dos filhos não participam do layout flex e ignoram as propriedades flex. Essencialmente, as propriedades flexíveis não são herdáveis além dos filhos.
Portanto, você sempre precisará aplicar display: flexoudisplay: inline-flex a um elemento pai para aplicar propriedades flexíveis ao filho.
Para centralizar verticalmente e / ou horizontalmente o texto ou outro conteúdo contido em um item flexível, torne o item um contêiner flexível (aninhado) e repita as regras de centralização.
.box {
display: flex;
justify-content: center;
align-items: center; /* for single line flex container */
align-content: center; /* for multi-line flex container */
}
Mais detalhes aqui: Como alinhar verticalmente o texto dentro de uma caixa flexível?
Como alternativa, você pode aplicar margin: autoao elemento de conteúdo do item flexível.
p { margin: auto; }
Aprenda sobre automargens flexíveis aqui: Métodos para alinhar itens flexíveis (na caixa nº 56).
Centralizando várias linhas de itens flexíveis
Quando um contêiner flexível possui várias linhas (devido ao empacotamento), a align-contentpropriedade será necessária para o alinhamento entre eixos.
Das especificações:
8.4 Embalagem Flex Lines: a align-content
propriedade
A align-contentpropriedade alinha as linhas de um contêiner flexível dentro do contêiner flexível quando houver espaço extra no eixo transversal, semelhante à forma como justify-contentalinha itens individuais no eixo principal.
Observe que essa propriedade não tem efeito em um contêiner flexível de linha única.
Mais detalhes aqui: Como o flex-wrap funciona com alinhar-se, alinhar itens e alinhar conteúdo?
Suporte do navegador
O Flexbox é suportado por todos os principais navegadores, exceto o IE <10 . Algumas versões recentes do navegador, como o Safari 8 e o IE10, exigem prefixos de fornecedores . Para uma maneira rápida de adicionar prefixos, use o Autoprefixer . Mais detalhes nesta resposta .
Solução de centralização para navegadores antigos
Para uma solução de centralização alternativa usando propriedades de tabela e posicionamento CSS, consulte esta resposta: https://stackoverflow.com/a/31977476/3597276
