Căn giữa một 'div' ở giữa màn hình, ngay cả khi trang được cuộn lên hoặc xuống?

Trong trang của tôi có một nút mà khi nhấp vào sẽ hiển thị div(kiểu cửa sổ bật lên) ở giữa màn hình của tôi.

Tôi đang sử dụng CSS sau đây để đặt divchính giữa màn hình:

.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 này hoạt động tốt miễn là trang không được cuộn xuống.

Nhưng, nếu tôi đặt nút ở cuối trang, khi nhấp vào, nút divđược hiển thị ở trên cùng và người dùng phải cuộn lên để xem nội dung của div.

Tôi muốn biết làm thế nào để hiển thị divở giữa màn hình, ngay cả khi trang đã được cuộn.

Thay đổi positionthuộc tính thành fixedthay vì absolute.

Thay đổi position:absolute;thànhposition:fixed;

Trích dẫn : Tôi muốn biết cách hiển thị div ở giữa màn hình, cho dù người dùng đã cuộn lên / xuống.

Thay đổi

position: absolute;

Đến

position: fixed;

Thông số kỹ thuật của W3C cho position: absolutevà cho position: fixed.

Tôi vừa tìm thấy một mẹo mới để căn giữa một hộp ở giữa màn hình ngay cả khi bạn không có kích thước cố định. Giả sử bạn muốn một hộp 60% chiều rộng / 60% chiều cao. Cách để làm cho nó tập trung là bằng cách tạo 2 hộp: hộp "container" ở vị trí bên trái: 50% trên cùng: 50% và hộp "văn bản" bên trong với vị trí đảo ngược bên trái: -50%; hàng đầu: -50%;

Nó hoạt động và nó tương thích trình duyệt chéo.

Kiểm tra mã dưới đây, bạn có thể nhận được một lời giải thích tốt hơn:

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>

Phương pháp đúng là

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