It took a while to find the right combination, but this seems to center the overlay or popup content, both horizontally and vertically, without prior knowledge of the content height:
HTML:
<div class="overlayShadow">
<div class="overlayBand">
<div class="overlayBox">
Your content
</div>
</div>
</div>
CSS:
.overlayShadow {
display: table;
position: fixed;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.75);
z-index: 20;
}
.overlayBand {
display: table-cell;
vertical-align: middle;
}
.overlayBox {
display: table;
margin: 0 auto 0 auto;
width: 600px; /* or whatever */
background-color: white; /* or whatever */
}