Centre un " div " dans le milieu de l'écran, même lorsque la page défile vers le haut ou vers le bas?

J'ai dans ma page un bouton qui lorsqu'il est cliqué affiche un div (popup style), au milieu de mon écran.

Je suis en utilisant le CSS suivant au centre de la div dans le 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;
}

Cette CSS fonctionne bien aussi longtemps que la page n'est pas défile vers le bas.

Mais, si je place le bouton en bas de ma page, lorsqu'il est cliqué, la div est affiché en haut, et l'utilisateur doit faire défiler jusqu'à afficher le contenu de la div.

Je voudrais savoir comment faire pour afficher le div dans le milieu de l'écran, même lorsque la page défile.

question question. Pourquoi êtes-vous en soustrayant margin-top: (200) et à la marge de gauche. Je crois que c'est la moyenne de la hauteur et la largeur, mais pourquoi devons-nous faire pour obtenir le centre absolu? Ne devrait pas gauche à 50% et supérieure à 50% faire l'affaire?
Le left: 50%; top: 50% déplace le coin supérieur gauche de l' .PopupPanel au centre de l'écran. Nous passons ensuite à la moitié de la largeur et de la hauteur de l'arrière par rapport au centre son centre. Voir Centrage sur css-tricks.com

InformationsquelleAutor tanya | 2011-06-13

181

Changer le position attribut fixed au lieu de absolute.
- Si vous avez besoin pour faire défiler le menu jusqu'div et de sa plus grande qu'à l'écran?
- Gardez en tête que ce n'est pas la plus sensible de la solution (mais une solution parfaite pour le problème ci-dessus). Vérifier getbootstrap.com/javascript/#modals et regardez avec vos DevTools pour obtenir quelques belles idées sur le travail avec votre popups/modals.
InformationsquelleAutor BraedenP
30

Changement position:absolute; à position:fixed;

InformationsquelleAutor Richard JP Le Guen
16

Devis: je voudrais savoir comment faire pour afficher le div dans le milieu de la
l'écran, si l'utilisateur a défiler vers le haut/vers le bas.

Changement
```
position: absolute;
```
À
```
position: fixed;
```
Spécifications du W3C pour position: absolute et pour position: fixed.

InformationsquelleAutor Sparky

Je viens de trouver un nouveau truc pour le centre d'une zone dans le milieu de l'écran, même si vous n'avez pas de taille fixe. Disons que vous souhaitez une boîte de 60% de largeur et de 60% de la hauteur. La façon de le faire est centrée par la création de 2 boîtes: un "conteneur" de la boîte de position gauche: 50% top :50%, et d'un "texte" boîte à l'intérieur avec position inverse à gauche: -50%; top :-50%;

Ça marche et c'est la croix-navigateur compatible.

Vérifier le code ci-dessous, vous avez probablement une meilleure explication:

HTML:

<div id="message">
<div class="container"><div class="text">
<h2>Warning</h2>
<p>The message</p>
<p class="close"><a href="#">Close Window</a></p>
</div></div>
<div class="bg"></div>
</div>
<style type="text/css">
html, body{ min-height: 100%; }
#message{ height: 100%; left: 0; position: fixed; top: 0; width: 100%; }
#message .container{ height: 60%; left: 50%; position: absolute; top: 50%; z-index: 10; width: 60%; }
#message .container .text{ background: #fff; height: 100%; left: -50%; position: absolute; top: -50%; width: 100%; }
#message .bg{ background: rgba(0,0,0,0.5); height: 100%; left: 0; position: absolute; top: 0; width: 100%; z-index: 9; }
</style>
<script type="text/javascript">
jQuery('.close a, .bg', '#message').on('click', function(){
jQuery('#message').fadeOut();
return false;
});
</script>

InformationsquelleAutor SequenceDigitale.com

Méthode correcte est

.PopupPanel
{
border: solid 1px black;
position: fixed;
left: 50%;
top: 50%;
background-color: white;
z-index: 100;
height: 400px;
margin-top: -200px;
width: 600px;
margin-left: -300px;
}

InformationsquelleAutor Sakthi Karthik

Vous devez vous connecter pour publier un commentaire.