центр div в середине экрана-даже при прокрутке страницы вверх / вниз

Question

центр 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;

}

он отлично работает, пока страница не прокручивается вниз..

но если я помещаю кнопку в нижней части моей страницы и нажимаю на нее, div отображается вверху (пользователь должен прокрутить вверх, чтобы просмотреть содержимое div).

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

635 5

css position

5 ответов:

Comments

Ничего не найдено.

BraedenP · Accepted Answer · 2017-03-28 14:54:53

изменить до fixed вместо absolute.

165

2017-03-28 14:54:53

Richard JP Le Guen · Accepted Answer · 2011-06-13 21:23:07

изменить position:absolute; до position:fixed;

29

2011-06-13 21:23:07

Sparky · Accepted Answer · 2013-01-25 22:12:15

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

изменить
position: absolute;
до
position: fixed;
спецификации W3C для position: absolute и position: fixed.

SequenceDigitale.com · Accepted Answer · 2013-11-10 08:47:48

Я только что нашел новый трюк, чтобы центрировать коробку в середине экрана, даже если у вас нет фиксированных размеров. Пусть говорят, что вы хотели бы коробку 60% ширина / 60% высота. Способ сделать его центрированным-создать 2 поля: поле "контейнер", которое находится слева: 50% top: 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>
Ура!

Sakthi Karthik · Accepted Answer · 2015-03-05 15:22:42

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

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