Toujours centrer parfaitement un élément par rapport à un autre

Toujours centrer parfaitement un élément par rapport à un autre

Comme vous le savez peut-être, centrer un élément horizontalement et verticalement par rapport à un autre peut être très complexe.

Alors que tout le monde pense savoir le faire, via l’utilisation de solutions à base de margin, il suffit que la hauteur du container change pour que plus aucun élément ne soit aligné.
Vous trouverez dans cet article les 2 meilleures solutions pour lesquelles vous devriez toujours opter afin d’aligner correctement les éléments dans vos pages.

Première solution

Afin de placer facilement un élément au centre d’une div, la première solution est souvent la plus simple à utiliser. Il s’agit du translate3D jumelé à une position absolute. Outre le fait que cela permet de facilement faire des animations, cette solution peut également permettre de mettre une image de fond sur un élément sans utiliser de CSS. Il faut alors y ajouter des width, height, max-width et max-height.

 

Deuxième solution

Depuis quelques années, le display flex est apparu et fonctionne dans énormément de cas, notamment afin de de centrer verticalement et horizontalement 2 éléments.