Centrer un «div» au 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'on clique dessus, affiche un div(style popup) au milieu de mon écran.

J'utilise le CSS suivant pour centrer le divau 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 divs'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 divau milieu de l'écran, même lorsque la page a été défilée.

Remplacez l' positionattribut par au fixedlieu de absolute.

Changer position:absolute;pourposition:fixed;

Quote : Je voudrais savoir comment afficher le div au milieu de l'écran, si l'utilisateur a fait défiler vers le haut / bas.

Changement

position: absolute;

À

position: fixed;

Spécifications W3C pour position: absoluteet pour position: fixed.

Je viens de trouver une nouvelle astuce pour centrer une boîte au milieu de l'écran même si vous n'avez pas de dimensions fixes. Disons que vous souhaitez 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» qui positionne à gauche: 50% haut: 50%, et une boîte «texte» à l'intérieur avec position inversée à gauche: -50%; haut: -50%;

Cela fonctionne et il est compatible avec tous les navigateurs.

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

jQuery('.close a, .bg', '#message').on('click', function() {
  jQuery('#message').fadeOut();
  return false;
});

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;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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>

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;
}