Pusatkan 'div' di tengah layar, bahkan saat halaman digulir ke atas atau ke bawah?

Saya memiliki di halaman saya sebuah tombol yang ketika diklik menampilkan div(gaya popup) di tengah layar saya.

Saya menggunakan CSS berikut untuk memusatkan divdi tengah layar:

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

CSS ini berfungsi dengan baik selama halaman tidak di-scroll ke bawah.

Namun, jika saya menempatkan tombol di bagian bawah halaman saya, ketika diklik, divakan ditampilkan di bagian atas, dan pengguna harus menggulir ke atas untuk melihat konten div.

Saya ingin tahu bagaimana menampilkan divdi tengah layar, bahkan ketika halaman telah di-scroll.

Ubah positionatribut menjadi, fixedbukan absolute.

Ganti position:absolute;keposition:fixed;

Kutipan : Saya ingin tahu bagaimana menampilkan div di tengah layar, apakah pengguna menggulir ke atas / bawah.

Perubahan

position: absolute;

Untuk

position: fixed;

Spesifikasi W3C untuk position: absolutedan untuk position: fixed.

Saya baru saja menemukan trik baru untuk memusatkan kotak di tengah layar meskipun Anda tidak memiliki dimensi tetap. Katakanlah Anda menginginkan kotak dengan lebar 60% / tinggi 60%. Cara membuatnya terpusat adalah dengan membuat 2 kotak: kotak "container" yang posisinya kiri: 50% atas: 50%, dan kotak "teks" di dalam dengan posisi terbalik kiri: -50%; atas: -50%;

Ini berfungsi dan kompatibel lintas browser.

Lihat kode di bawah ini, Anda mungkin mendapatkan penjelasan yang lebih baik:

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>

Metode yang Benar adalah

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