Question

我在相关问题部分找不到类似的问题，所以我想试试运气。

我正在设计一个页面，其中加载时间明显足够长，可以显示加载图标。目前我已将其设置为使图标显示在屏幕中央，页面上有半透明覆盖，直到页面加载完成。这是我正在使用的代码

        <style type="text/css">
    #overLayBackground{
     background-color: rgb(250, 250, 250);
     opacity: 0.7; /* Safari, Opera */
     -moz-opacity:0.25; /* FireFox */
     filter: alpha(opacity=70); /* IE */
     z-index: 200;
     height: 100%;
     width: 100%;
     background-repeat:repeat;
     position:fixed;
     top: 0px;
     left: 0px;
     text-align:center; 
         line-height: 240px; 
    }

    #overLayBackground>img {
        position:absolute; bottom:0; top:0; left:0; right:0; margin:auto;
    }

<div id="overLayBackground">
    <img src="www.example.com/images/loading.gif" title="Image" alt="The image" />
</div>

现在这在Firefox和Chrome中正常运行，但IE左上角有图标显示。有没有办法让它像其他浏览器一样运行并将其置于屏幕中央？

提前致谢。

Answer 1

一旦指定了doctype并修复了语法错误（样式标记内的div），您的代码就可以在IE8中运行。

Answer 2

如果使用margin：auto进行居中，则不应使用img的绝对定位。

编辑：回应评论。 margin：auto仅适用于水平居中，这是根据边距的工作原理定义的。对于垂直居中，我过去使用过不同的技术，使用top：50％，然后使用负上边距。

我推荐这篇alistapart文章：

http://www.alistapart.com/articles/holygrail/

以及更多的alistapart善良：

http://www.alistapart.com/articles/practicalcss/

Answer 3

以下是我在自定义云应用程序中使用的自定义内容：NGEN Preload Screen

查看body.onload操作源...

随意在您的闲暇时重新使用它......

Answer 4

找到解决方案。如果将#overLayBackground＆gt; img行更改为position：absolute;顶部：50％;左：50％;它适用于IE和FF，可以垂直和水平对齐图像。感谢所有回应。

CSS将图像定位在所有浏览器中的屏幕中心，但IE

4 个答案: