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

Ich habe in meine Seite eine Schaltfläche, die beim anklicken zeigt eine div (popup-Stil) in der Mitte von meinem Bildschirm.

Ich bin mit dem folgenden CSS, um die Mitte der div in der Mitte des Bildschirms:

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

Diese CSS funktioniert gut, solange die Seite nicht nach unten gescrollt.

Aber, wenn ich den Knopf an der Unterseite von meiner Seite, wenn es angeklickt wird, werden die div wird im oberen Bereich angezeigt, und der Benutzer hat, um nach oben zu Blättern, um den Inhalt der div.

Ich würde gerne wissen, wie die Anzeige der div in der Mitte des Bildschirms, auch wenn die Seite ein Bildlauf durchgeführt wurde.

Frage. Warum sind Sie subtrahieren margin-top: (200) und margin-left. Ich glaube, das ist die mittlere von der Höhe und Breite, aber warum müssen wir tun, um die absolute Mitte? Sollte nicht die linken 50% und die oberen 50% den trick tun?
Die left: 50%; top: 50% verschiebt die linke Obere Ecke des .PopupPanel auf die Mitte des Bildschirms. Wir verschieben es dann die Hälfte der Breite und Höhe wieder zurück zur Mitte der Mitte. Siehe Zentrierung auf css-tricks.com

InformationsquelleAutor tanya | 2011-06-13

179

Ändern Sie die position Attribut fixed statt absolute.
- Was ist, wenn Sie Rollen müssen, die pop-up-div-Element und seine größer als der Bildschirm?
- Behalten Sie im Kopf, dass dies nicht die effizienteste Lösung (aber eine perfekte Lösung für das problem oben). Check getbootstrap.com/javascript/#modals und suchen Sie mit Ihrem DevTools, um einige schöne Ideen zum arbeiten mit Ihren popups/modals.
InformationsquelleAutor BraedenP
30

Ändern position:absolute; zu position:fixed;

InformationsquelleAutor Richard JP Le Guen
16

Zitat: ich würde gerne wissen, wie die Anzeige der div in der Mitte des
Bildschirm, ob der Benutzer Bildlauf nach oben/unten.

Ändern
```
position: absolute;
```
Zu
```
position: fixed;
```
W3C-Spezifikationen für position: absolute und für position: fixed.

InformationsquelleAutor Sparky

Fand ich einen neuen trick zu Mitte ein Feld in der Mitte des Bildschirms, auch wenn Sie keine festen Dimensionen. Lassen Sie uns sagen, Sie möchten ein box 60% Breite /60% Höhe. Der Weg, um es zentriert ist, durch die Schaffung von 2 Boxen: eine "container" - box, die position Links: 50% top :50% und einem "text" - box, die innen mit umgekehrter position left: -50%; top :-50%;

Es funktioniert und es ist cross-browser kompatibel.

Schauen Sie sich den code unten, bekommen Sie wahrscheinlich eine bessere Erklärung:

HTML:

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

InformationsquelleAutor SequenceDigitale.com

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

InformationsquelleAutor Sakthi Karthik

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.