如何以绝对位置将Modal Popup居中

Question

我正在尝试在屏幕中央放置一个模式弹出窗口，但无法使其正常工作。

在小提琴中，我有一个顶层div（横幅），其中包含另一个div（寄存器/标题），用于显示模式。 该子div使用（margin：auto和top / bottom / left / right：0）绝对位于父div的中心，效果很好。 但是，当我将相同的位置应用于模式（其父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> 

Answer 1

要使以父对象为主体的div居中，还需要声明其宽度和高度。

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