Wyśrodkować „div” na środku ekranu, nawet gdy strona jest przewijana w górę lub w dół?

126

Mam na swojej stronie przycisk, który po kliknięciu wyświetla div(styl wyskakującego okienka) na środku ekranu.

Używam następującego kodu CSS, aby wyśrodkować divśrodek ekranu:

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

Ten CSS działa dobrze, o ile strona nie jest przewijana w dół.

Ale jeśli umieszczę przycisk u dołu mojej strony, po jego kliknięciu divjest wyświetlany u góry, a użytkownik musi przewinąć w górę, aby wyświetlić zawartość div.

Chciałbym wiedzieć, jak wyświetlić divśrodek ekranu, nawet jeśli strona została przewinięta.

tanya
źródło
pytanie pytanie. Dlaczego odejmujesz margin-top: (200) i margin-left. Wydaje mi się, że to jest środek wysokości i szerokości, ale dlaczego musimy to robić, aby uzyskać absolutny środek? Czy lewe 50% i górne 50% nie powinny załatwić sprawy?
jmoon90
@ jmoon90 W left: 50%; top: 50%przesuwa górny lewy róg z następujących .PopupPanelna środku ekranu. Następnie przesuwamy go o połowę szerokości i wysokości z powrotem do środka, do środka. Zobacz Wyśrodkowanie na css-tricks.com
kub1x

Odpowiedzi:

189

Zmień positionatrybut na fixedzamiast absolute.

BraedenP
źródło
2
A co, jeśli musisz przewinąć wyskakujący element div, który jest większy niż ekran?
Darcbar
Pamiętaj, że nie jest to najbardziej responsywne rozwiązanie (ale idealne rozwiązanie powyższego problemu). Sprawdź getbootstrap.com/javascript/#modals i wygląd ze swoimi DevTools dostać jakieś fajne pomysły na temat pracy z pop-upów / czasowniki modalne.
Cas Bloem
31

Zmień position:absolute;naposition:fixed;

Richard JP Le Guen
źródło
17

Cytat : Chciałbym wiedzieć, jak wyświetlić div na środku ekranu, czy użytkownik przewinął w górę / w dół.

Zmiana

position: absolute;

Do

position: fixed;

Specyfikacje W3C dla position: absolutei dla position: fixed.

iskrzący
źródło
6

Właśnie znalazłem nowy sposób na wyśrodkowanie pudełka na środku ekranu, nawet jeśli nie masz stałych wymiarów. Powiedzmy, że chcesz pudełko o 60% szerokości / 60% wysokości. Sposobem na wyśrodkowanie jest utworzenie 2 pól: „kontenera”, którego pozycja po lewej stronie: 50% u góry: 50%, i pola „tekstowego” w środku z odwróconą pozycją po lewej: -50%; góra: -50%;

Działa i jest kompatybilny z różnymi przeglądarkami.

Sprawdź poniższy kod, prawdopodobnie uzyskasz lepsze wyjaśnienie:

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>

SequenceDigitale.com
źródło
4

Prawidłowa metoda to

.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;
}
Sakthi Karthik
źródło