如何以絕對位置將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;    
}