web-dev-qa-db-fra.com

Centrer un "div" au milieu de l'écran, même lorsque la page est défilée vers le haut ou le bas?

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 la 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.

Mais, si je place le bouton en bas de ma page, lorsque l'on clique dessus, le div s'affiche en haut et l'utilisateur doit faire défiler l'écran pour afficher le contenu de div.

J'aimerais savoir comment afficher la div au milieu de l'écran, même lorsque la page a été défilée.

htmlcssscrollpositioncentering
116
tanya

Changez l'attribut position en fixed au lieu de absolute.

178
BraedenP

Remplacez position:absolute; par position:fixed;

30
Richard JP Le Guen

Citation : J'aimerais savoir comment afficher la div au milieu de l'écran, que l'utilisateur ait fait défiler l'écran vers le haut ou vers le bas.

Changement

_position: absolute;
_

À

_position: fixed;
_

Spécifications du W3C pour position: absolute et pour position: fixed .

16
Sparky

Je viens de trouver un nouveau truc pour centrer une boîte au milieu de l'écran même si vous n'avez pas de dimensions fixes. Supposons que vous souhaitiez une boîte de 60% de largeur/60% de hauteur. La façon de le centrer est de créer 2 boîtes: une boîte "conteneur" avec la position gauche: 50% en haut: 50% et une boîte "texte" à l'intérieur avec une position inversée à gauche: -50%; en haut: -50%;

Cela fonctionne et est compatible avec tous les navigateurs.

Consultez le code ci-dessous, vous obtiendrez probablement une meilleure explication:

<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>
5
SequenceDigitale.com

La 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;
}
4
Sakthi Karthik