Uma versão anterior da especificação de layout CSS Flexible Box definia a posição estática de filhos com posição absoluta como se fossem um item flexível com tamanho de 0 px por 0 px. A versão mais recente da especificação retira-as completamente do fluxo e define a posição estática com base nas propriedades de alinhamento e justificação. No momento em que este artigo foi escrito, o Edge e o Opera 39 para computadores e Android já ofereciam suporte a isso.
Como exemplo, vamos aplicar alguns comportamentos de posicionamento ao seguinte HTML.
<div class="container">
<div>
<p>In Chrome 52 and later, the green box should be centered vertically and horizontally in the red box.</p>
</div>
</div>
Vamos adicionar algo como:
.container {
display: flex;
align-items: center;
justify-content: center;
}
.container > * {
position: absolute;
}
No Chrome 52 ou mais recente, o <div> aninhado será centralizado perfeitamente no
contêiner <div>.
Em navegadores não conformes, o canto superior esquerdo da caixa verde fica no centro superior da caixa vermelha.
Se você quiser testar isso no Chrome ou em qualquer outro navegador, faça o download do nosso exemplo ou acesse a demonstração ao vivo.