Pourquoi « top : 50 % » ne fonctionne-t-il pas comme prévu en CSS ?

Décalage en pourcentage CSS : Comprendre pourquoi « top : 50 % » ne fonctionne pas

Dans le domaine des mises en page CSS réactives, définir un La valeur en pourcentage de la propriété « supérieure » peut parfois s'avérer difficile. Alors que « gauche : 50 % » fonctionne comme prévu, l'utilisation de « haut : 50 % » donne des résultats inattendus.

原因

La clé réside dans la compréhension Les propriétés « supérieures » sont calculées. Contrairement à « left », qui fait référence à la largeur du conteneur, « top » fait référence à la hauteur du conteneur. Par conséquent, si la hauteur du conteneur n'est pas définie, la valeur « top : 50 % » devient effectivement 50 % de 0px, ce qui n'entraîne aucun déplacement vertical.

Solution

Pour résoudre ce problème, il existe deux approches principales :

1. Définir une dimension pour le Conteneur parent :
   Spécifiez des valeurs explicites de hauteur et de largeur pour le conteneur afin de fournir une référence pour les décalages basés sur un pourcentage. Par exemple :

   <div>

2. Étendez le conteneur parent :
   Vous pouvez également définir la hauteur et la largeur du conteneur à l'aide de valeurs absolues et l'étirer jusqu'aux bords de son élément conteneur :

   <div>

En implémentant l'une de ces solutions, vous pouvez vous assurer que "top : 50 %" fonctionne comme prévu, fournissant un centrage vertical dans une mise en page réactive.

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!