Uma versão anterior da especificação de layout CSS flexível Box definiu a posição estática de filhos de posição absoluta como se eles fossem um item flexível com tamanho de 0 px por 0 px. A versão mais recente da especificação os remove totalmente do fluxo e define a posição estática com base nas propriedades align e justify. No momento em que este artigo foi escrito, o Edge e o Opera 39 para computador e Android já tinham suporte a isso.
Por exemplo, vamos aplicar alguns comportamentos de posicionamento ao HTML a seguir.
<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 assim:
.container {
display: flex;
align-items: center;
justify-content: center;
}
.container > * {
position: absolute;
}
No Chrome 52 ou versões mais recentes, a <div>
aninhada estará perfeitamente centralizada no
contêiner <div>
.
Em navegadores não conformes, o canto superior esquerdo da caixa verde vai ficar no centro superior da caixa vermelha.
Se você quiser testar esse recurso no Chrome ou em qualquer outro navegador, faça o download da nossa amostra ou acesse a demonstração ao vivo (links em inglês).