Pourquoi « top : 50 % » ne centre-t-il pas mon élément verticalement lorsque « left : 50 % » fonctionne correctement ?

Le pourcentage le plus élevé de CSS ne se comporte pas comme prévu : analyse des raisons

À la recherche d'une mise en page réactive, vous rencontrez une anomalie où "top :50%" ne fonctionne pas comme prévu, tandis que "left:50%" fonctionne sans problème. Pourquoi cela se produit-il ?

Pour comprendre le comportement, considérez la structure d'éléments parent et enfant suivante :

<div>

La clé pour résoudre le problème réside dans la compréhension du fonctionnement de la propriété "top" dans CSS. Lorsque vous spécifiez un pourcentage, tel que « 50 % », il est calculé par rapport à la hauteur du conteneur parent. Cependant, dans ce scénario, le conteneur parent n'a pas de hauteur explicite définie, donc la propriété "top" est effectivement calculée par rapport à une valeur inconnue.

Pour résoudre ce problème, vous devez établir une hauteur fixe pour le conteneur parent. . Cela fournira le point de référence nécessaire pour la position supérieure de l'élément enfant.

Exemple 1 : Définir une hauteur

<div>

En fournissant une hauteur de 200px au parent div, la position supérieure du div enfant est désormais correctement calculée à 50 % de 200 px, ce qui donne la verticale attendue. centrage.

Exemple 2 : Étirement du conteneur

Une approche alternative consiste à étirer le conteneur parent pour occuper tout l'espace disponible :

<div>

En définissant les propriétés haut, bas, gauche et droite du conteneur, celui-ci se développe pour remplir l'espace disponible. La position supérieure du div enfant est ensuite calculée par rapport au conteneur étiré, obtenant le même effet de centrage.

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!