Pourquoi les marges automatiques ne fonctionnent-elles pas avec le positionnement absolu en CSS ?

Conflit de positionnement absolu CSS avec les marges automatiques

En CSS, la propriété de position absolue supprime un élément du flux normal du document, et il est positionné en fonction des propriétés haut, gauche, droite et bas. Cependant, lorsque les propriétés margin-left et margin-right sont définies sur auto avec une position absolue, elles n'ont aucun effet.

En effet, les propriétés margin-left: auto et margin-right: auto tenter de centrer l'élément dans son bloc conteneur. Pour un élément avec une position absolue, son bloc conteneur est le corps du document. Cependant, le corps du document lui-même n'a pas de largeur définie, le navigateur ne peut donc pas déterminer où l'élément doit être centré.

D'un autre côté, lorsque la propriété position est définie sur relative, l'élément est supprimé de le flux normal, mais sa boîte imaginaire reste dans le flux documentaire. Dans ce cas, lorsque margin-left et margin-right sont définis sur auto, les marges seront calculées en fonction de la largeur du bloc conteneur, qui pour un élément relativement positionné est toujours le corps du document. Cependant, comme le corps du document a une largeur définie, le navigateur peut déterminer correctement où l'élément doit être centré.

Pour centrer un élément avec un positionnement absolu :

Au lieu de cela d'utiliser margin-left: auto et margin-right: auto, vous pouvez définir les propriétés left et right à 50 %. Cela centrera l'élément dans le corps du document. Vous devrez également spécifier les propriétés haut et bas pour empêcher l'élément de sortir de l'écran.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!