How to center Modal Popup with absolute position

Question

I am trying to place a modal popup at the center of the screen but cannot get it to work.

In the Fiddle I have a top div (banner) which contains another div (register/header) that I use to reveal the modal. This child div is absolutely positioned at the center of the parent div, using (margin: auto and top/bottom/left/right: 0) which works fine. However, when I apply the same positioning to the modal (whose parent div is the body), the popup appears at the top left corner of the screen rather than at the center. Not sure why that happens.

Fiddle

 $(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

To center a div whose parent is the body, you need also to declare its width and height.

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