Pourquoi « top : 50 % » ne centre-t-il pas correctement les éléments dans les mises en page réactives ?

Pourquoi CSS "top : 50 %" ne fonctionne-t-il pas comme prévu dans les mises en page réactives ?

Dans la conception Web réactive, utiliser des pourcentages pour CSS des propriétés telles que "top" sont cruciales pour maintenir le positionnement des éléments sur différentes tailles d'écran. Cependant, des problèmes peuvent survenir lorsque « top : 50 % » n'aligne pas correctement les éléments.

Considérez le code HTML et CSS suivant :

<div>

Le problème ici est que le « top : 50 % » " La propriété du div enfant fait référence à la hauteur du div parent, qui n'est pas définie. De ce fait, le div enfant ne sera pas positionné à 50% du haut de la fenêtre.

Pour résoudre ce problème, vous devez définir une hauteur spécifique pour le div parent. Par exemple :

<div>

Maintenant, le div enfant sera positionné à 50 % du haut du div parent, qui a une hauteur définie.

Alternativement, vous pouvez étirer le div parent. div pour remplir toute la fenêtre d'affichage en définissant ses propriétés "haut", "bas", "gauche" et "droite" :

<div>

En définissant les dimensions du div parent ou en l'étirant pour remplir la fenêtre, vous vous assurez que des pourcentages tels que « top : 50 % » peuvent aligner correctement les éléments dans les mises en page réactives.

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!