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

您可以计算屏幕宽度和叠加宽度，并使用如下计算左侧：

var left = (screenWidth - OverlayWidth) / 2

这将使你每次都集中对齐。

前：

  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";

Answer 2

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的内容有多大，它总是以完美为中心。

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

2 个答案: