Una versión anterior de la especificación de diseño del CSS Flexible Box establecía la posición estática de los elementos secundarios con posición absoluta como si fueran un elemento flex cuyo tamaño es de 0 px por 0 px. La versión más reciente de la especificación los quita por completo del flujo y establece la posición estática en función de las propiedades de alineación y justificación. En el momento de la redacción de este documento, Edge y Opera 39 para computadoras de escritorio y Android ya son compatibles con esta función.
A modo de ejemplo, apliquemos algunos comportamientos de posicionamiento al siguiente código 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>
Agregaremos algo como lo siguiente:
.container {
display: flex;
align-items: center;
justify-content: center;
}
.container > * {
position: absolute;
}
En Chrome 52 o versiones posteriores, el <div> anidado se centrará perfectamente en el <div> del contenedor.
En los navegadores que no cumplen con los requisitos, la esquina superior izquierda del cuadro verde estará en el centro superior del cuadro rojo.
Si quieres probarlo en Chrome o en cualquier otro navegador, descarga nuestro ejemplo o visita la demo en vivo.