Центрируйте 'div' в центре экрана, даже когда страница прокручивается вверх или вниз? - PullRequest
Новая
       21

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

115 голосов
/ 13 июня 2011

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

Ответы [ 5 ]

175 голосов
/ 13 июня 2011

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

30 голосов
/ 13 июня 2011

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

16 голосов
/ 13 июня 2011

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

Изменить 

position: absolute;

К 

position: fixed;

W3C Технические характеристики для position: absolute и для position: fixed.

5 голосов
/ 10 ноября 2013

Я только что нашел новый трюк для центрирования прямоугольника по центру экрана, даже если у вас нет фиксированных размеров.Допустим, вы хотели бы коробку 60% ширины / 60% высоты.Чтобы сделать его центрированным, нужно создать 2 поля: поле «контейнер» с позицией слева: 50% сверху: 50% и поле «текст» внутри с обратной позицией слева: -50%;top: -50%;

Это работает и совместимо с различными браузерами.

Проверьте код ниже, вы, вероятно, получите лучшее объяснение: 

<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>

<style type="text/css">
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; }
</style>

<script type="text/javascript">
jQuery('.close a, .bg', '#message').on('click', function(){
    jQuery('#message').fadeOut();
    return false;
});
</script>

Да!

4 голосов
/ 05 марта 2015

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

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