Une version précédente de la spécification de mise en page Boîte flexible CSS définit la position statique des enfants en position absolue comme s'il s'agissait d'un élément Flex dont la taille est de 0 px par 0 px. La dernière version de la spécification les supprime complètement du flux et définit la position statique en fonction des propriétés d'alignement et de justification. Au moment de la rédaction de ce document, Edge et Opera 39 pour ordinateur et Android sont déjà compatibles avec cette fonctionnalité.
Par exemple, appliquons des comportements de positionnement au code HTML suivant.
<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>
Nous allons ajouter quelque chose comme ceci:
.container {
display: flex;
align-items: center;
justify-content: center;
}
.container > * {
position: absolute;
}
Dans Chrome 52 ou version ultérieure, l'élément <div> imbriqué est parfaitement centré dans le conteneur <div>.
Dans les navigateurs non conformes, l'angle supérieur gauche du cadre vert se trouve en haut au centre du cadre rouge.
Si vous souhaitez essayer par vous-même dans Chrome ou dans un autre navigateur, téléchargez notre exemple ou consultez la démonstration en direct.