Une version précédente de la spécification de mise en page de la boîte flexible CSS définissait la position statique des enfants à position absolue comme s'ils étaient un élément flex dont la taille est de 0 px sur 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 align et justify. Au moment de la rédaction de cet article, 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'<div> imbriquée sera parfaitement centrée dans le conteneur <div>.
Dans les navigateurs non conformes, le coin supérieur gauche du cadre vert se trouve en haut au centre du cadre rouge.
Si vous souhaitez essayer vous-même cette fonctionnalité dans Chrome ou dans un autre navigateur, téléchargez notre exemple ou accédez à la démo en direct.