Centrer un élément avec CSS : positionnement absolu ou positionnement relatif

Lorsque vous essayez de centrer un élément à l'aide de CSS, vous pouvez rencontrer un problème où margin-left: auto et margin-right: auto semblent inefficaces avec position: absolue. Cependant, ces marges fonctionnent lorsque position: relative est appliquée.

Cette différence vient de la façon dont position: Absolute supprime un élément du flux normal du document et le place en fonction des coordonnées fournies. Dans ce contexte, définir les marges sur auto n'a aucun effet car il n'y a pas d'élément "parent" avec lequel calculer les marges relatives.

D'un autre côté, position: relative maintient la position de l'élément dans le flux normal de la page. . Par conséquent, margin-left: auto et margin-right: auto peuvent être utilisés pour centrer l'élément par rapport à son élément conteneur.

Pour centrer un élément horizontalement en utilisant le positionnement absolu, vous pouvez définir la largeur de l'élément, le positionner sur les bords gauche et droit de son conteneur parent en utilisant gauche et droite, et définissez les positions supérieure et inférieure pour centrer l'élément verticalement.