Центруйте "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атрибут на, fixedа не на absolute.

Змінити 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;
}