javascript - 让弹出框显示在屏幕中间

Question

我需要一个盒子的教程，它在屏幕的垂直中间显示一个膨胀到屏幕的水平中间。

当垂直屏幕尺寸较小时，我目前的尝试有很多失败。

它还需要响应。任何人都可以指向带有解决方案的教程或片段。

    function openPopUp( item ) {
    var render_height = $('body').height();
    $('.black_overlay').height(render_height + 'px');
    $('.black_overlay').show();
    $('#popup').show();
    var html ='';
    html += '<h6 class="popup-header">More Information About the Debt</h6>';
    html += '<img src="images/cancel30.png" width="20" height="20" onclick="closePopUp();" style="display:block;margin-top:10px;margin-bottom:10px;margin-left:auto;margin-right:auto;cursor:pointer;">'; 
    html += '<table style="width:100%;">';
    html += '<tr><td>First Name</td><td>' + $(item).attr("hidden-data-dfname") + "</td><tr>";
    html += '<tr><td>Last Name</td><td>' + $(item).attr("hidden-data-dlname") + "</td><tr>";
    html += '</table>';
    $('#popup').html(html);
} // end method openPopUp


function closePopUp() {
    $('#popup').hide();
    $('.black_overlay').hide();
} // end function closePopUp


    <div id="popup">
    </div>  
      <div id="fade" class="black_overlay"></div>

    .black_overlay{
    display: none;
    position: absolute;
    top: 0%;
    left: 0%;
    width: 100%;
    height: 100%;
    background-color: black;
    z-index:1001;
    -moz-opacity: 0.8;
    opacity:.80;
    filter: alpha(opacity=80);
}
#popup {
   position: fixed;
   display: none;
   top: 25%;
   overflow: hidden;
   border: 1px solid #CCC;
   background-color: #F9F9F9;
   border: 1px solid #333;
   width: calc(100% - 42px);
   z-index: 1002;
}
#popup table {
    margin-left:5px;
    margin-right:5px;
    margin-bottom:10px;
}
.popup-header {
    padding:5px;
    background:#006;
    color:#FFF;
    text-align:center;
    width:100%; 
}

Answer 1

div 的水平和垂直居中仅使用这么多的 css

#popup {
position: fixed;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}

没有 JavaScript 和 calc 等。无论屏幕大小如何，它都会保持在中心。