如何将 DIV 放在所有页面的顶部和中间？
Mic*_*elS 2 html css asp.net jquery
我有一个带有 aform和 a的页面div：
<body>
<form id="form1" runat="server">
...
</form>
<div id="wizardDiv" style="width: 100%; height: 100%;background-color:black;display:none">
<div style="background-color:#8DA5C6; z-index:999; width: 50%; margin: 0 auto;">
...
</div>
</div>
</body>
单击按钮时，我使div可见，并且我希望它覆盖整个页面，而内部div正好位于中间（在中心，水平和垂直。）就像一个弹出式 modal。
举例说明：
当前的 html 失败如下：
- The
div不覆盖整个页面，它位于 之后form，而是覆盖它。 - 内部
div仅水平居中，而不是垂直居中。
我在这里缺少什么？
我的方法是“浏览器兼容性”安全吗？（也许我应该寻找 Jquery 解决方案？）
最终解决方案：
我最终使用了：
- Didier G 回答了叠加问题。
- Jquery将 div 居中显示在屏幕上
- 用于圆角 div 角的CSS3
使用稍微不同的标记和 css 来定位您的叠加层和弹出窗口。
像这样构建一个简单的标记：
<form id="form1" runat="server">
...
</form>
<div id="overlay"></div>
<div id="popup">Popup</div>
请注意，我没有将弹出窗口放在叠加层中。虽然这样做没有坏处，但如果您想使用 css opacity 设置覆盖样式，其中包含的所有内容也将是半透明的。
然后使用以下 CSS：
#overlay {
position: absolute;
top:0;
left:0;
bottom:0;
right:0;
width:100%;
height:100%;
z-index:998;
background-color: Black;
opacity: .5;
}
#popup {
position: absolute;
width:50%;
background-color:#8DA5C6;
z-index: 999;
}
- 这两个元素都必须
position: absolute离开页面流。 - 覆盖层必须覆盖整个空间。这是通过
top, left, right, bottom, width, height - 使用
z-index，您可以让它们保持在其他事物之上。覆盖层较低，弹出窗口较高
您可以查看此小提琴以获取工作示例。
笔记：
这不会使弹出窗口居中。这样做需要更多的工作，而且有点复杂（是否有固定大小的弹出窗口，如果在调整窗口大小时弹出窗口保持居中...）。
我猜它需要一些javascript。
您不能margin: 0 auto;在绝对定位元素上使用。
| 归档时间： |
|
| 查看次数： |
12912 次 |
| 最近记录： |