在网页中心显示 div答案

【问题标题】：Showing div at the center of the webpage在网页中心显示 div
【发布时间】：2012-03-03 09:53:51
【问题描述】：

我有一个显示“请稍候”的 div。 div 的标记是

<div id="pleaseWait" class="divOuterPleaseWait" style="left:expression((documentElement.clientWidth-this.offsetWidth)/2);top:expression(documentElement.scrollTop+((documentElement.clientHeight-this.clientHeight)/2 ));">Please Wait...</div>

这在 IE7 上运行良好。在 IE7 中，div 显示在页面的中心。但在其他浏览器（即 IE8、IE9、FireFox、Google Chrome 等）中未选择例外行为。我应该付出什么才能使它在所有浏览器中都能正常工作？我也可以将内联样式移动到我的 CSS 中吗？

【问题讨论】：

@Pankaj 边距：0 自动；作品宽度定义宽度
如果只显示该消息，为什么宽度会出现问题？

标签： javascript asp.net css

【解决方案1】：

使 div 居中的一个好方法是使用固定定位，顶部和左侧设置为 50%，左侧和顶部边距设置为宽度/高度一半的负数：

http://jsfiddle.net/fLa4S/

【讨论】：

没错，虽然固定定位在 IE 7 中有一些特性（不尊重 z-index 并且我已经注意到绘图错误）。

【解决方案2】：

请参阅 this SO answer 或 this jsfiddle（按“确认”按钮）。您在问题中显示的 css 是特定于浏览器的（尤其是：IE）。在javascript中，您可以通过确定“视口”尺寸（可用屏幕的高度/宽度）来居中元素，并相对于这些尺寸定位元素。此处的链接演示了一种方法。

【讨论】：

【解决方案3】：

它在“其他浏览器”中不起作用，因为您在 CSS 中使用的表达式 1) 由于各种原因（速度慢、已弃用、非标准）非常糟糕，2) 不必要。

您可以使用纯 CSS 定位（百分比和负边距）或一点 JavaScript（jQuery 使这很容易）在所有浏览器中完成相同的事情。

【讨论】：

问题不在于为什么这不起作用？这就是让它发挥作用的原因。你有解决办法吗？
@AshBurlaczenko - 查看我的回答：“百分比和负边距”。

【解决方案4】：

另一种方法：

<div style="text-align:center;width=200px;margin-left:auto;margin-right:auto">Please wait...</div>

【讨论】：

【解决方案5】：

CSS 表达式仅适用于 IE。但是，使用它们通常不是一个好主意，因为它们不符合 W3C 标准，此外，当您大量使用它们时，它们可能会非常慢。

CSS 属性 position: fixed 可以帮助你：

#pleaseWait {
    width: 400px;
    height: 200px;
    position: fixed; /* IE8+ */
    left: 50%;
    top: 50%;
    margin-left: -200px; /* half of width*/
    margin-top: -100px; /* half of height*/
}

如果您仍然必须支持

【讨论】：

【解决方案6】：

使用 auto 作为边距并定义宽度和高度就足够了

<div style="width:200px;height:50px;margin:auto;text-align:center">Please wait ...</div>

如果你只想垂直居中，使用 margin: 0 auto;

PS：如果你想要更正确的 XHTML，请将你的 CSS 放在一个 CSS 文件中，并使用一个类或一个 id 来定义 css 样式

我之前回答过这个问题：How to set the div in center of the page

【讨论】：