CSS 在除 IE 之外的所有浏览器中将图像定位在屏幕中央

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

一旦指定文档类型并修复语法错误(样式标记内的 div)，您的代码就可以在 IE8 中运行。