Pourquoi « margin : auto » ne centre-t-il pas les éléments positionnés de manière absolue ?

Échec du centrage d'éléments positionnés de manière absolue avec des marges automatiques

Lorsque vous tentez de centrer un élément positionné de manière absolue sur la page à l'aide de marges automatiques, l'effet attendu le comportement peut ne pas se produire. Plus précisément, définir margin-left et margin-right sur auto ne parvient pas à centrer l'élément, même si cette technique fonctionne pour un élément relativement positionné.

Cette divergence se produit parce que les éléments en position absolue sont retirés de leur flux régulier. dans la mise en page du document. Dans cette position détachée, le comportement automatique des marges d'alignement de l'élément sur son conteneur ne s'applique plus.

Solution

Pour centrer correctement un élément avec un positionnement absolu, un une approche alternative devrait être employée. Voici quelques options :

• Largeur fixe et centré : Définition d'une largeur fixe et application à gauche : 50 % ; transformer : traduire (-50 %, 0 ); centre l'élément horizontalement.
• Containing Parent : Placez l'élément à l'intérieur d'un élément parent et centrez-le à l'aide de text-align: center.
• Flexbox : Utilisez la disposition flexbox pour aligner l'élément horizontalement dans son conteneur.

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!