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

Centrage des éléments positionnés : au-delà de 'margin: auto'

En CSS, centrer un élément à l'aide de la propriété margin: auto peut être délicat lorsque traitant d'éléments positionnés de manière absolue ou fixes. Pour comprendre ce comportement, nous devons nous plonger dans la spécification CSS.

Centrage des éléments In-Flow

Pour les éléments In-Flow (sans positionnement absolu ou fixe), définir à la fois margin-left et margin-right sur auto permet d'obtenir un centrage horizontal par rapport au bloc conteneur. Cela fonctionne car la spécification CSS dicte que si les deux marges sont définies sur automatique, elles doivent être égales, ce qui entraîne le centrage de l'élément.

Centrage absolu et fixe des éléments

Cependant, lorsqu'il s'agit d'éléments absolus ou fixes, la situation est différente. La spécification CSS indique que :

• Si les trois valeurs gauche, largeur et droite sont automatiques, les valeurs margin-left et margin-right sont définies sur 0, empêchant le centrage automatique.
• Si gauche, largeur ou droite n'est pas automatique, les deux autres propriétés ont leurs valeurs automatiques définies sur 0 et les marges restantes sont calculées de manière égale. Cela entraîne un centrage.
• Si aucune des trois propriétés n'est automatique, les marges gauche et droite sont à nouveau définies sur 0 et des règles spécifiques s'appliquent pour ajuster la position de l'élément.

Régler Left et Right sur zéro

Pour centrer un élément absolument ou fixe à l'aide de margin: auto, vous devez également définir left et right sur 0. Cela oblige le navigateur à calculer margin-left et margin-right de manière égale, ce qui entraîne un centrage horizontal.

Cependant, si vous spécifiez une autre valeur pour gauche ou droite, le centrage ne se produira que si vous définissez également la largeur. L'omission de l'une de ces propriétés entraînera un élément non centré.

Exemple concret

Considérez le code suivant :

.box {
  height: 50px;
  border: 1px solid;
  position: relative;
}

.box > div {
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
  width: 200px;
  background-color: red;
  color: #fff;
}

Dans cet exemple, définir left: 0 et right: 0 garantit que le div est toujours aligné avec les bords gauche et droit de la boîte. La propriété margin: auto centre ensuite le div horizontalement dans la boîte.

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!