如何将 DIV 放在所有顶部和页面中间？答案

【问题标题】：How to place DIV on top of all and on the middle of page?如何将 DIV 放在所有顶部和页面中间？
【发布时间】：2011-12-14 20:07:55
【问题描述】：

我有一个带有form 和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 就在中间（在中心，水平和垂直。）只是类似于弹出模式。

举例说明：

当前的 html 失败如下：

div 没有覆盖整个页面，它位于form 之后，而是覆盖它。
内部div 仅水平居中，而不是垂直居中。

我在这里缺少什么？

我的方法是“浏览器兼容性”安全吗？（也许我应该寻找一个 Jquery 解决方案？）

最终解决方案：

我最终使用了：

【问题讨论】：

您似乎错过了position:absolute; 属性
@Dandroid：我尝试将它分别添加到每个 div 中，并且同时添加到两个 div 中，但没有帮助。
你给wizardDiv 的z-index 是否也比z-index:999 的div 低？
请粘贴完整代码查看。如果它是机密的，您可以删除所有文本...

标签： jquery asp.net html css

【解决方案1】：

使用稍微不同的标记和 css 来定位叠加层和弹出窗口。

像这样构建一个简单的标记：

<form id="form1" runat="server">
    ...
</form>
<div id="overlay"></div>
<div id="popup">Popup</div>

请注意，我没有将弹出窗口放在叠加层中。虽然这样做并没有什么坏处，但如果您想使用 css 不透明度设置叠加层样式，则其中包含的所有内容也将是半透明的。

然后使用以下 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，您可以让他们掌握其他内容。一个较低的叠加层和一个较高的弹出窗口

您可以查看此fiddle 以获取工作示例。

注意：

这不会使弹出窗口居中。这样做需要做更多的工作，而且有点复杂（弹出窗口是否固定大小，如果在调整窗口大小时弹出窗口保持居中...）。

我猜这需要一点 javascript。

您不能在绝对定位的元素上使用margin: 0 auto;。

【讨论】：

G，添加 position:absolute 使用户向下滚动页面时变得丑陋，div将跟随页面而不是再次覆盖整个页面。所以你需要定位：绝对这个

【解决方案2】：

您实际上可以在 Jquery 的帮助下做到这一点。

<div class="overlay"></div>
<div id="form-container">
   <form>
       ...//codes here
   </form>
</div>

确保叠加层的高度与您的页面相同，宽度为 0 且位置为绝对值。触发事件时，使用 jQuery 对覆盖层进行动画处理以覆盖整个网页。

希望对你有帮助 =D

【讨论】：

我想知道 jquery 如何才能正确设置两个 <div> 与纯 css 的样式... jQuery 不是解决所有问题的方法。

【解决方案3】：

试试这个代码

<body>
    <form id="form1" runat="server">
        ...
    </form>
    <div id="wizardDiv" style="position:fixed;top:0;left:0;width: 100%; height: 100%;background-color:black;display:none" z-index:998>
        <div style="background-color:#8DA5C6; z-index:999; width: 50%; margin: 20 auto;">                
           ...
        </div>
    </div>
</body>

我只是修改了你的代码，如果我这样写 css，它可能会可读：

#wizarddiv{
  position:fixed; /* it make the overlay have fixed position even you scroll the page */
  top:0; /* let make the overlay pushed up, to the top of the screen. */
  left:0; /* you probably know what it this */
  z-index: 999; /* set to the higher value, also note that you don't need to set it too to the child element.
  background: rgba(0,0,0,.5);
}

【讨论】：