Centrer un élément
Comment centrer une boîte dans une autre boîte ? Centrer à la fois horizontalement et verticalement était difficile avant l'arrivée des boîtes flexibles (flexbox), mais c'est désormais beaucoup plus simple grâce aux propriétés du module de spécification Box Alignment.
Spécifications sommaires
Centrer un élément à la fois horizontalement et verticalement dans un autre élément.
Recette
Note : Télécharger cet exemple
Choix effectués
Pour centrer une boîte dans une autre, on a donné au contenant une propriété display: flex.
Ensuite, on a paramétré align-items avec la valeur center pour centrer la boîte verticalement, et justify-content avec la valeur center pour centrer horizontalement.
À l'avenir, nous pourrons peut-être centrer les éléments sans avoir à transformer le parent en contenant flexible, puisque les propriétés de Box Alignment utilisées ici sont aussi faites pour s'appliquer à une disposition en bloc classique. Cependant, sa prise en charge dans ce cas (disposition en bloc) est actuellement limitée ; l'utilisation de Flexbox pour centrer est donc, pour le moment, la technique la plus robuste.