Centrer un «div» au milieu de l'écran, même lorsque la page défile vers le haut ou vers le bas?


126

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.


question question. Pourquoi soustrayez-vous margin-top: (200) et margin-left. Je pense que c'est le milieu de la hauteur et de la largeur, mais pourquoi devons-nous faire cela pour obtenir le centre absolu? Les 50% de gauche et les 50% supérieurs ne devraient-ils pas faire l'affaire?
jmoon90

@ jmoon90 Le left: 50%; top: 50%déplace le coin supérieur gauche du .PopupPanelvers le centre de l'écran. Nous le déplaçons ensuite de la moitié de la largeur et de la hauteur au centre de son centre. Voir Centrage sur css-tricks.com
kub1x

Réponses:


189

Remplacez l' positionattribut par au fixedlieu de absolute.


2
Et si vous avez besoin de faire défiler le div pop-up et sa taille supérieure à l'écran?
Darcbar

Gardez à l'esprit que ce n'est pas la solution la plus réactive (mais une solution parfaite pour le problème ci-dessus). Consultez getbootstrap.com/javascript/#modals et regardez avec vos DevTools pour avoir de bonnes idées sur l'utilisation de vos popups / modals.
Cas Bloem


17

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.


6

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>


4

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;
}
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.