Pourquoi « margin : auto » ne centre-t-il pas les éléments à position absolue ou fixe ?

Pourquoi Margin:auto Alone ne centrera pas les éléments positionnés

Lorsque vous essayez de centrer un élément div dans un conteneur parent en utilisant la position : Absolute ou position : propriétés fixes, en utilisant margin: auto seul peut ne pas suffire.

Comprendre la spécification CSS

Selon les spécifications CSS, pour les éléments avec position : relatif ou position : statique (flux normal), en définissant à la fois margin-left et margin-right pour centrer automatiquement horizontalement l'élément par rapport à son bloc conteneur, à mesure que leurs valeurs utilisées deviennent égales. Cependant, cela ne s'applique pas aux éléments avec position : absolue ou position : fixe.

Pour les éléments positionnés de manière absolue ou fixe, où les trois valeurs gauche, largeur et droite sont automatiques, les valeurs utilisées de margin-left et margin-right sont définis sur 0 pour empêcher le centrage. Pour centrer de tels éléments, il faut définir des valeurs pour la gauche, la droite ou la largeur.

L'effet du réglage de la gauche, de la droite et de la largeur

Si gauche, droite, et la largeur sont toutes définies, les marges prennent des valeurs égales, ce qui entraîne un centrage. L'omission de l'une de ces valeurs entraînera un écart de l'élément par rapport à l'alignement central.

Démonstration avec différents cas

Le tableau suivant montre les différents cas, tels que décrits dans le CSS spécification :

Margin Setting	Centring
margin-left: auto; margin-right: auto	Yes (flow element)
margin-left: auto; margin-right: auto	No (absolute/fixed element)
left: auto; right: auto; width: auto	No (margin set to 0)
left: 0; right: 0; width: auto	No (margin set to 0)
right: auto; left: auto;	No (margin set to 0)
left: auto; right: auto; width: 200px	Yes (equal margins)
left: 0; width: auto	Yes (equal margins)
right: 0; width: auto	Yes (equal margins)

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!