Centrer avec les transformations

Problème et solution

Centrer un élément en HTML et CSS peut être fait de multitudes de façon. Les techniques basées sur le text-align, le margin et la disposition flex sont toutes très utilent, mais elles sont plus difficile à utiliser lorsque nous voulons superposer des éléments. Dans ce genre de cas, une technique utilisant un mix du position et du transform.

Explication

Dans cette méthode pour centrer, la position absolue est utilisé pour mettre un élément par dessus un autre. On pourrait croire que de mettre le top et left à 50% centre l'élément, mais ce n'est pas le cas. En effet, ces propriétés vont plutôt centrer le coin en haut à gauche de l'élément au centre. Il faut donc décaler l'élément vers le haut et la gauche pour complètement le centrer. C'est ici que la propriété transform nous aide.

La propriété transform est particulière dans le fait que lorsqu'on utilise des pourcentage comme unité de mesure, au lieu d'être un pourcentage du parent, elle compte le pourcentage de l'élément lui-même. Dans ce cas-ci, on décale donc l'élément de la moitié de sa largeur vers la gauche et la moitié de sa hauteur vers le haut.