Блог

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

В скрипке у меня есть верхний div (баннер), который содержит другой div (регистр / заголовок), который я использую для отображения модального. Этот дочерний div абсолютно расположен в центре родительского div, используя (margin: auto и top / bottom / left / right: 0), который отлично работает. Однако, когда я применяю то же самое позиционирование к модальному (родительский div которого является телом), всплывающее окно появляется в верхнем левом углу экрана, а не в центре. Не уверен, почему это происходит.

Скрипка

 $(document).ready(function() {
    $('#register').click(function(e) { 
           $('#modal1').reveal({                   
            closeonbackgroundclick: true,              
            dismissmodalclass: 'close'   
        });
    return false;
    });                 
}); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id="banner">            
    <a href="#" class="header" id="register">Register</a>  
</div>
<div id="modal1" class="modal" ><p>Modal Popup</p></div>  
<div id="map"></div> 

Чтобы центрировать div, родительским элементом которого является тело, вам также необходимо указать его ширину и высоту.

 .div {
bottom: 0;
height: 400px;
width:600px;
left: 0;
margin: auto;
position: absolute;
right: 0;
top: 0;    
}