Comment `margin: 0 auto;` centre-t-il un élément dans son conteneur ?

Auto : Centrer un élément dans son conteneur

Lors de la définition de la propriété margin avec auto comme deuxième paramètre, l'élément en cours de style est sans effort centré dans son conteneur parent. Cela se produit parce que :

• Calcul automatique : Le navigateur détermine automatiquement les marges gauche et droite, en divisant l'espace disponible de manière égale entre elles.
• Égal Marges : Les marges gauche et droite sont garanties d'avoir la même taille pour garantir une symétrie positionnement.

Répartition des propriétés de marge :

margin: 0 auto;

• 0 définit les marges supérieure et inférieure sur 0.
• auto calcule automatiquement les marges gauche et droite pour centrer le élément.

Exemple :

Considérons un conteneur parent d'une largeur de 100 px et un élément enfant d'une largeur de 50 px. La propriété auto calculera l'espace disponible entre les marges de l'enfant :

freeSpace = 100 - 50 = 50px
equalShare = 50 / 2 = 25px

En conséquence :

margin-left: 25px
margin-right: 25px

L'élément enfant sera désormais centré dans le conteneur parent. Ce positionnement peut être observé en action à travers ce [jsFiddle](lien vers jsFiddle). Notez que seule la largeur de l'objet enfant doit être spécifiée pour que la propriété auto prenne effet.

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!