javascript - 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>

我通过 style.display='block 将此 div 显示为弹出窗口

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

对于任何屏幕分辨率，我都希望它位于屏幕中央。

因此我将 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 的内容有多大，这总是完美居中。