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.

an element centered inside a larger box

Spécifications sommaires

Centrer un élément à la fois horizontalement et verticalement dans un autre élément.

Recette

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.

Compatibilité des navigateurs

Les différentes méthodes de layout ont chacune leur compatibilité avec les navigateurs. Les tableaux ci-dessous détaillent le support de base pour chaque propriété.

align-items

BCD tables only load in the browser

justify-content

BCD tables only load in the browser

Voir aussi