Pourquoi Margin : Auto ne centre-t-il pas toujours les éléments positionnés ?

Margin:auto pas suffisant pour centrer les éléments positionnés

Lorsque vous essayez de centrer horizontalement un élément positionné de manière absolue ou fixe, la propriété margin:auto seul peut ne pas suffire.

Pour les éléments in-flow (éléments sans position : absolue ou fixe), définir uniquement la largeur est suffisant. Marge : auto équilibrera automatiquement les marges gauche et droite pour centrer l'élément.

Cependant, pour les éléments positionnés, la situation est différente. Conformément à la spécification CSS :

• Si gauche, droite et largeur sont toutes automatiques, margin-left et margin-right sont définies sur 0, ce qui entraîne aucun centrage.
• Si left, right et width ne sont pas tous automatiques, margin-left et margin-right sont définis sur des valeurs égales, ce qui entraîne un centrage.

Pour centrer un élément positionné :

1. Définir la gauche, la droite et la largeur

position: absolute;
left: 0;
right: 0;
width: 70px;

2. Définissez margin-left et margin-right sur auto (facultatif)

position: absolute;
left: 0;
right: 0;
width: 70px;
margin-left: auto;
margin-right: auto;

Régler gauche et droite sur 0 définit essentiellement les limites gauche et droite à l'intérieur desquelles l'élément peut se déplacer. Marge : auto équilibre ensuite l'espace entre ces limites.

Exemple :

Considérons un élément parent d'une largeur de 200 px et un élément enfant positionné de manière absolue d'une largeur de 70px :

parent {
  width: 200px;
  position: relative;
}
child {
  position: absolute;
  left: 0;
  right: 0;
  width: 70px;
  margin: auto; /* Optional */
}

Lorsque margin: auto est utilisé, l'élément enfant est centré horizontalement par rapport au parent. En effet, les marges calculées (marge gauche et marge droite) sont égales, ce qui positionne effectivement l'enfant au milieu de l'espace disponible.

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!