Question

I’ve successfully centered horizontally my overlay dialog with margin: 0 auto;.

But I have no idea how to center it vertically.

Any suggestions?

CSS:

/* =Overlay
-------------------------------------------------------------- */
#overlay {
     display: none;
     position: absolute;
     left: 0px;
     top: 0px;
     width:100%;
     height:100%;
     text-align:center;
     z-index: 1000;
}

#overlay #dish-popup {
     margin: 0 auto;
     background-color: #fff;
     padding:15px;
     text-align:center;
     width: 810px !important;
     height: 700px !important;
}

Answer 1

You need to add the rule 100% for every parent in your html structure for this to work, if all parents do not have a height of 100% then it would not center vertically on any screen.