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

Question

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

J'utilise la feuille de style CSS suivante 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;
}

Cette CSS fonctionne bien tant que la page n'est pas défilée.

Mais, si je place le bouton en bas de ma page, lorsqu'il est cliqué, le bouton div est affiché en haut de l'écran, et l'utilisateur doit faire défiler l'écran vers le haut pour voir le contenu de la section div .

Je voudrais savoir comment afficher le div au milieu de l'écran, même lorsque la page a été déroulée.

Answer 1

Changez le position à l'attribut fixed au lieu de absolute .

Answer 2

Changement position:absolute; a position:fixed;

Answer 3

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

Changement

position: absolute;

A

position: fixed;

---

Les spécifications du W3C pour position: absolute et pour position: fixed .

Answer 4

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 voulez une boîte de 60% de largeur / 60% de hauteur. La façon de la centrer est de créer 2 boîtes : une boîte "conteneur" avec une position gauche : 50% ; haut : 50%, et une boîte "texte" à l'intérieur avec une position inverse gauche : -50% ; haut : -50% ;

Il fonctionne et il est compatible avec tous les navigateurs.

Regardez le code ci-dessous, vous aurez 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>

Answer 5

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