Поместите div в центр видимой области

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

Я предполагаю, что jQuery/JS будет лучшим способом для этого; вот мой текущий код CSS, который работает довольно хорошо, но div необходимо динамически помещать в видимое пространство для небольших экранов.

.my-div{
    width:960px;
    height:540px;
    position:absolute;
    top:50%;
    left:50%;
    margin-left:-480px;
    margin-top:-270px;
    z-index:60;
    display:none;
}

javascript jquery centering
person mmmoustache    schedule 30.01.2012    source источник
comment
@Truth Извините, еще рано. Не знаю, откуда это взялось. Я удалил свой комментарий.   -  person My Head Hurts    schedule 30.01.2012
comment
Возможный дубликат Как центрировать элемент html в окне браузера?   -  person TylerH    schedule 24.02.2019

Ответы (4)


arrow_upward
49
arrow_downward

Вы были рядом! Это можно сделать только с помощью CSS:

Используйте position: fixed вместо position: absolute.

Фиксированный относится к области просмотра, а абсолютный относится к документу. Прочитайте все об этом!

person Madara's Ghost    schedule 30.01.2012

arrow_upward
5
arrow_downward

Я знаю, что это не решит вопрос, но это хороший справочник и отправная точка: Как чтобы поместить div в центр окна браузера

Расположите Div ровно по центру экрана

<!DOCTYPE html> 
  <html > 
    <head> 
      <style type="text/css"> 
        .exactCenter { 
           width:200px; 
           height:200px; 
           position: fixed; 
           background-color: #00FF00; 
           top: 50%; 
           left: 50%; 
           margin-top: -100px; 
           margin-left: -100px; 
        } 
      </style> 
    </head> 
    <body> 
      <div class="exactCenter"> </div> 
    </body> 
  </html>

JSFiddle здесь и здесь

person Adrian P.    schedule 26.01.2015

arrow_upward
3
arrow_downward

с jQuery:

var left = ($(window).width() - $(.my-div).width()) / 2;
var top = ($(window).height() - $(.my-div).height()) / 2;
$('.my-div').position({top: top + 'px', left: left + 'px});
person André Alçada Padez    schedule 30.01.2012

arrow_upward
2
arrow_downward

Хотя принятый ответ лучше всего, если вы не можете установить divs position на fixed, вы можете использовать это чистое решение JavaScript .

var myElement = document.getElementById('my-div'),
    pageWidth = window.innerWidth,
    pageHeight = window.innerHeight,
    myElementWidth = myElement.offsetWidth,
    myElementHeight = myElement.offsetHeight;

myElement.style.top = (pageHeight / 2) - (myElementHeight / 2) + "px";
myElement.style.left = (pageWidth / 2) - (myElementWidth / 2) + "px";

JSFiddle

Или более сжатый вариант:

var w = window,
    elem = document.getElementById('my-div');

elem.style.top = (w.innerHeight/2) - (elem.offsetHeight/2) + 'px';
elem.style.left = (w.innerWidth/2) - (elem.offsetWidth/2) + 'px';

Этот ответ представляет собой ванильную версию JavaScript из ответа Лахиру Ашана.

person Jessica    schedule 19.08.2016