Question

我有一个显示“请等待”的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，谷歌Chrome等）。我应该给这个在所有浏览器中工作的内容？我也可以将内联样式移动到我的CSS吗？

Answer 1

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

http://jsfiddle.net/fLa4S/

Answer 2

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

Answer 3

它在“其他浏览器”中不起作用，因为你在CSS中使用表达式1）由于各种原因（缓慢，弃用，非标准）和2）不必要而非常糟糕。

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

Answer 4

另一种方法：

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

Answer 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*/
}

如果你仍然需要支持＆lt; = IE7，你必须使用JavaScript（但不在CSS定义中！）

Answer 6

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

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

如果您只想以verticaly为中心，请使用 margin：0 auto;

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

我之前已经回答过：How to set the div in center of the page

在网页中心显示div

6 个答案: