javascript - CSS float 弹出窗口 : Tricky CSS Positioning

Question

我有一个网站，点击链接后会生成一个 div。

请允许我更深入地解释一下。我的 CMS 中有一个“页面”表，并且我添加了通过一个小弹出 div 添加新页面的功能。

我的弹出式 div 定义在表格下方，但是 style="display:none"所以它不会出现在页面上。单击“添加新页面”按钮后，我的 javascript 函数会触发:

document.getElementById("addPage").style.display="block";

这允许 div 在调用时神奇地出现。

但是，这是我的问题；我希望这个 div 始终显示在中央，但我的标准 margin:auto 不允许它使 div 居中，因为它仍然出现在表格下方(尽管右/左居中且 z-index:999)。

这是我的 CSS 代码:

#addPage{
 width:250px; 
 height:180px;
 background-color:#FFFFFF;
 border:1px #000000 solid;
 position:absolute;
 z-index:999;
 padding:10px;
}

Answer 1

因为你想垂直和水平居中，你可以使用dead centre technique .它使用绝对定位将已知宽度/高度的元素放在屏幕中央。

如果叠加层的尺寸是动态的，您只需运行一些 javascript 来确定其宽度/高度，然后再显示它。