วาง 'div' ไว้ตรงกลางหน้าจอแม้ว่าหน้าจะเลื่อนขึ้นหรือลง?

ฉันมีปุ่มในหน้าของฉันซึ่งเมื่อคลิกแล้วจะแสดงdiv(รูปแบบป๊อปอัป) ที่กลางหน้าจอของฉัน

ฉันใช้ CSS ต่อไปนี้เพื่อdivจัดกึ่งกลางตรงกลางหน้าจอ:

.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 นี้ทำงานได้ดีตราบเท่าที่ไม่ได้เลื่อนหน้าลง

แต่ถ้าฉันวางปุ่มที่ด้านล่างของหน้าเมื่อคลิกปุ่มdivจะแสดงที่ด้านบนและผู้ใช้ต้องเลื่อนขึ้นเพื่อดูเนื้อหาของไฟล์div.

ฉันต้องการทราบวิธีแสดงdivตรงกลางหน้าจอแม้ว่าจะเลื่อนหน้าไปแล้วก็ตาม

เปลี่ยนpositionแอตทริบิวต์แทนfixedabsolute

เปลี่ยนposition:absolute;เป็นposition:fixed;

ข้อความอ้างอิง : ฉันต้องการทราบวิธีแสดง div ที่กลางหน้าจอว่าผู้ใช้เลื่อนขึ้น / ลงหรือไม่

เปลี่ยนแปลง

position: absolute;

ถึง

position: fixed;

ข้อกำหนด W3C สำหรับposition: absoluteและสำหรับposition: fixed.

ฉันเพิ่งพบเคล็ดลับใหม่ในการจัดวางกล่องตรงกลางหน้าจอแม้ว่าคุณจะไม่มีขนาดคงที่ก็ตาม สมมติว่าคุณต้องการกล่องกว้าง 60% / สูง 60% วิธีที่จะทำให้มันอยู่กึ่งกลางคือการสร้างกล่อง 2 กล่อง: กล่อง "คอนเทนเนอร์" ที่อยู่ด้านซ้าย: 50% ด้านบน: 50% และช่อง "ข้อความ" ด้านในโดยมีตำแหน่งย้อนกลับด้านซ้าย: -50%; ด้านบน: -50%;

ใช้งานได้และเข้ากันได้กับเบราว์เซอร์ข้าม

ตรวจสอบรหัสด้านล่างคุณอาจได้รับคำอธิบายที่ดีกว่า:

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>

วิธีที่ถูกต้องคือ

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