Sayfa yukarı veya aşağı kaydırıldığında bile ekranın ortasında bir 'div' ortala?

Sayfamda, tıklandığında ekranımın divortasında bir (açılır stil) görüntüleyen bir düğme var .

divEkranın ortasını ortalamak için aşağıdaki CSS'yi kullanıyorum :

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

Bu CSS, sayfa aşağı kaydırılmadığı sürece iyi çalışır.

Ancak, düğmeyi sayfamın altına yerleştirirsem, tıklandığında divüstte görüntülenir ve kullanıcının içeriğini görüntülemek için yukarı kaydırması gerekir div.

divSayfa kaydırılmış olsa bile ekranın ortasında nasıl görüntüleneceğini bilmek istiyorum .

Değişim positioniçin özellik fixedyerine absolute.

Değişim position:absolute;içinposition:fixed;

Alıntı : Kullanıcı yukarı / aşağı kaydırmış olsun, div'in ekranın ortasında nasıl görüntüleneceğini bilmek istiyorum.

Değişiklik

position: absolute;

için

position: fixed;

W3C özellikleri için position: absoluteve position: fixed.

Sabit boyutlarınız olmasa bile bir kutuyu ekranın ortasında ortalamak için yeni bir numara buldum. Diyelim ki% 60 genişlik /% 60 yükseklik bir kutu istiyorsunuz. Ortalamanın yolu 2 kutu oluşturmaktır: sola konumlanan bir "kap" kutusu:% 50 üst:% 50 ve solda ters konumlu bir "metin" kutusu:% -50; üst: -% 50;

Çalışır ve çapraz tarayıcı uyumludur.

Aşağıdaki koda bakın, muhtemelen daha iyi bir açıklama alırsınız:

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>

Doğru Yöntem

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