[Résolu] Positionnement vertical d'un popup

Bonjour,

Je cherche à positionner un popup verticalement au milieu de l'écran (ou de la section qui fait 100vh) indépendamment de la position où se trouve l'élément qui déclenche le popup.
Est-ce que c'est possible en CSS ?
Merci pour vos aides.

Bonjour,

L'idéal serait de mettre la popup en position fixed qui aura alors l'origine en haut à gauche de la page. Il ne restera plus qu'à mettre les positions top et left à 50%.

Bien à vous

Salut,

Gus a écrit :
Il ne restera plus qu'à mettre les positions top et left à 50%.

Et ensuite a recentrer la popup avec un

transform:translate(-50%,-50%);

Sinon la popup sera dans le quart en bas à droite de la page.

Merci Gus et Laurent,

Effectivement c'est de ce côté-là que je cherchais mais en fait ça ne marche pas.
Le problème c'est le positionnement vertical:
Le principe fonctionne mais je pense que le top: 50% et translate -50% se fait par rapport à l'élément qui ouvre le popup et ce que je cherche c'est que peu importe où est l'élément déclencheur la popup s'ouvre au milieu de la section/page verticalement.

Pour être un peu plus précis, voilà ce que j'ai:
(Wordpress - Divi - Divi Mega Pro)

J'ai une section qui fait 100vh
dans la section j'ai une ligne centré horizontalement et toujours de la même hauteur.
Dans cette ligne j'ai des modules à différents endroits et certains de ces modules ouvrent un popup.
Je peux facilement aligner horizontalement ces popup avec simplement un "margin auto" et ce indépendamment de la position horizontale de l'élément déclencheur.
Par contre pour l'alignement vertical au centre de la page ça ne marche pas.
Je peux le faire manuellement avec un top: xxpx mais je dois tâtonner et du coup je devrais le faire manuellement pour chaque popup dans chaque section et j'en ai 125
Et le cas échéant si je modifie quelque chose je devrait réajuster à chaque fois.

Salut,

Il faudrait nous donner ton code html+css pour voir ce qui peut poser problème parce que logiquement cela devrait fonctionner :
- Le position:fixed avec les top left de Gus permettent de positionner le coin gauche superieur du contenu pile où l'on veut (et donc dans ton cas mettre le début de ta popup au centre de la page)
- La transformation de Laurent permet ensuite de déplacer la popup de la moitié de sa hauteur et de la moitié de sa largeur en arrière pour que ce soit le centre de la popup qui soit au centre.

Bonjour,

Où est l'élément de la modale : frère de ton contenu (en fin de DOM) ou dans le contenu ?
Est-ce que tu as des overflow: quelque-chose; parmi les ancêtres, des ancêtres positionnés, un truc particulier sur body ?
Quel est l'élément de ta modale qui est en position: fixed: l'ancêtre (genre <dialog>), un élément .modal-wrapper descendant direct ou au 2e niveau de ce dialog ?

Bref il va falloir poster ton code, y a tellement de façons de faire et de contraintes (scroll ?, bloquer ou pas le scroll du contenu comme Bootstrap ne le fait plus parce qu'iOS¤@#*, avec ou sans CSS Grid, où placer la barre de scroll - au niveau de la fenêtre ou scrollbar interne et dans ce cas avec ou sans le bouton Fermer, etc etc)

Bonjour,

Je pense que vos solutions sont bonnes mais dans mon cas ça ne marche toujours pas.
Je pense que ça vient d'un conflit.

J'utilise Wordpress et Divi et le popup en question est un module Divi Mega Pro.
Je pense qu'il y a quelque chose dans ces modules qui court-circuitent le code que je mets.

Je pense donc que je peux mettre en résolu même si ce n'est pas le cas pour moi et encore merci à tous.