it-swarm.com.de

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 ein div (Popup-Stil) in der Mitte meines Bildschirms anzeigt.

Ich verwende das folgende CSS, um das div in 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 jedoch die Schaltfläche am unteren Rand meiner Seite platziere, wird beim Klicken oben die div angezeigt, und der Benutzer muss nach oben scrollen, um den Inhalt der div anzuzeigen. ].

Ich möchte wissen, wie die div in der Mitte des Bildschirms angezeigt wird, auch wenn die Seite gescrollt wurde.

116
tanya

Ändern Sie das Attribut position in fixed anstelle von absolute.

178
BraedenP

Veränderung position:absolute; bis position:fixed;

30

Zitat : Ich möchte 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: absolute und für position: fixed .

16
Sparky

Ich habe gerade einen neuen Trick gefunden, um ein Kästchen 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. Der Weg, es zu zentrieren, besteht darin, 2 Kästchen zu erstellen: ein "Container" -Kästchen an der linken Position: 50% oben: 50% und ein "Text" -Kästchen an der linken umgekehrten Position: -50%; oben: -50%;

Es funktioniert und ist browserübergreifend kompatibel.

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

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

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