HTML Popup Div 到任何屏幕分辨率的屏幕中心

Question

我有以下 html div：

<div id="AddUser" style="background-color: White; border: 2px solid black; display: none;
        width: 800px; z-index: 1001; top: 60px; left: 240px; position: fixed; padding-left: 10px">
        <table width="98%">
            <tr>
                <td colspan="6" align="center">
                   -------Content-----
                </td>
            </tr>
        </table>
    </div>

我将这个 div 显示为 style.display='block 的弹出窗口

但它以不同的屏幕分辨率出现在不同的地方。

我想让它在任何屏幕分辨率的屏幕中心。

因此我将left 和top 指定为%

但后来它也没有正确查看。

有什么办法可以解决这个问题？？？

请帮忙。

Answer 1

Here I made a JSfiddle for you

这是你的 CSS

#AddUser{
 display: inline-block;
text-align: left;
width: 800px;
min-height: 800px;
padding: 25px;
 border: 2px solid black; 



}
#parent
{
position:absolute;
border: 2px solid red; 
left:0px;
top:0px;
right:0px;
bottom:0px;
display: table-cell;
text-align: center;
padding-top: 40px;
overflow:auto;
} 

这是你的 html：

<div id="parent">

<div id="AddUser" >
    <table >
        <tr>
            <td colspan="6" align="center">
               -------Content-----
            </td>
        </tr>
    </table>
</div>

无论屏幕有多大或 AddUser div 的内容有多大，它总是完美居中。

Answer 2

您可以计算屏幕宽度和覆盖宽度，并使用计算左如下：

var left = (screenWidth - OverlayWidth) / 2

这将使您的 div 每次都居中对齐。

例如：

  var screenWidth = $(window).width(),
      overlayWidth = $('#AddUser').width(),
      calculatedLeft = (screenWidth - overlayWidth) / 2;

  $('#AddUser').css({
     left: calculatedLeft,
     position: fixed
  });

//without using jQuery

   var screenWidth = window.screen.width,
       overlay = document.getElementById('AddUser'),
       overlayWidth = overlay.width,
       calculatedLeft = (screenWidth - overlayWidth) / 2;

overlay.style.left = calculatedLeft + "px";