Центрировать div по центру экрана, даже когда страница прокручивается вверх или вниз?

126

У меня на странице есть кнопка, которая при нажатии отображает 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в середине экрана, даже когда страница прокручена.

— таня
источник

вопрос вопрос. Почему вы вычитаете margin-top: (200) и margin-left. Я чувствую, что это средний уровень высоты и ширины, но почему мы должны это делать, чтобы получить абсолютный центр? Разве не должны помочь левые 50% и верхние 50%?

— jmoon90 06

@ jmoon90 В left: 50%; top: 50%перемещает левый верхний угол из .PopupPanelк центру экрана. Затем мы перемещаем его на половину ширины и высоты обратно в центр. См. Centering на css-tricks.com

— kub1x

189

Измените positionатрибут на fixedвместо absolute.

— BraedenP
источник

2

Что насчет того, если вам нужно прокрутить всплывающий div и его размер больше экрана?

— Darcbar

Имейте в виду, что это не самое быстрое решение (но идеальное решение проблемы, указанной выше). Проверьте getbootstrap.com/javascript/#modals и посмотрите с помощью DevTools, чтобы получить несколько хороших идей о работе с вашими всплывающими / модальными окнами.

— Cas Bloem

31

Изменить position:absolute;наposition:fixed;

— Ричард Дж. П. Ле Гуен
источник

17

Цитата : Я хотел бы знать, как отображать div в середине экрана, прокручивал ли пользователь вверх / вниз.

+ Изменить

position: absolute;

к

position: fixed;

Спецификации W3C для position: absoluteи для position: fixed.

— Спарки
источник

6

Я только что нашел новый трюк, позволяющий центрировать прямоугольник в центре экрана, даже если у вас нет фиксированных размеров. Допустим, вам нужен блок шириной 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>

Развернуть фрагмент

— SequenceDigitale.com
источник

4

Правильный метод

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

— Шакти Картик
источник