J'ai dans ma page un bouton qui, lorsqu'on clique dessus, affiche un div
(style popup) au milieu de mon écran.
J'utilise le CSS suivant pour centrer le div
au milieu de l'écran:
.PopupPanel
{
border: solid 1px black;
position: absolute;
left: 50%;
top: 50%;
background-color: white;
z-index: 100;
height: 400px;
margin-top: -200px;
width: 600px;
margin-left: -300px;
}
Ce CSS fonctionne bien tant que la page n'est pas déroulée vers le bas.
Mais, si je place le bouton en bas de ma page, quand on clique dessus, le div
s'affiche en haut et l'utilisateur doit faire défiler vers le haut pour afficher le contenu du div
.
Je voudrais savoir comment afficher le div
au milieu de l'écran, même lorsque la page a été défilée.
left: 50%; top: 50%
déplace le coin supérieur gauche du .PopupPanel
vers le centre de l'écran. Nous le déplaçons ensuite de la moitié de la largeur et de la hauteur au centre de son centre. Voir Centrage sur css-tricks.com