Ein 'div' in der Mitte des Bildschirms zentrieren, auch wenn die Seite nach oben oder unten gescrollt wird?

Ich habe auf meiner Seite eine Schaltfläche, die beim Klicken einen div(Popup-Stil) in der Mitte meines Bildschirms anzeigt .

Ich verwende das folgende CSS, um das divin der Mitte des Bildschirms zu zentrieren:

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

Dieses CSS funktioniert einwandfrei, solange die Seite nicht nach unten gescrollt wird.

Wenn ich die Schaltfläche jedoch unten auf meiner Seite platziere und sie anklicke, divwird sie oben angezeigt, und der Benutzer muss nach oben scrollen, um den Inhalt der Seite anzuzeigen div.

Ich möchte wissen, wie man das divin der Mitte des Bildschirms anzeigt , auch wenn die Seite gescrollt wurde.

Ändern Sie das positionAttribut in fixedanstelle von absolute.

Wechseln Sie position:absolute;zuposition:fixed;

Quote : Ich würde gerne wissen, wie man das div in der Mitte des Bildschirms anzeigt, ob der Benutzer nach oben / unten gescrollt hat.

Veränderung

position: absolute;

Zu

position: fixed;

W3C-Spezifikationen für position: absoluteund für position: fixed.

Ich habe gerade einen neuen Trick gefunden, um eine Box in der Mitte des Bildschirms zu zentrieren, auch wenn Sie keine festen Abmessungen haben. Angenommen, Sie möchten eine Box mit 60% Breite / 60% Höhe. Die Art und Weise, wie es zentriert wird, besteht darin, 2 Felder zu erstellen: ein "Container" -Feld mit der linken Position: 50% oben: 50% und ein "Text" -Feld mit umgekehrter Position links: -50%; oben: -50%;

Es funktioniert und ist browserübergreifend kompatibel.

Schauen Sie sich den folgenden Code an, Sie erhalten wahrscheinlich eine bessere Erklärung:

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>

Richtige Methode ist

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