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

Ваш код работает в IE8, если вы указали тип документа и исправили синтаксическую ошибку (div внутри тега style).

Answer 2

Вот пользовательский, который я использовал с одним из моих пользовательских облачных приложений: Экран предварительной загрузки NGEN

Просмотр исходного кода для действия body.onload ...

Не стесняйтесь использовать его на досуге ...

Answer 3

Если вы используете margin: auto для центрирования, вам не следует использовать абсолютное позиционирование для img.

РЕДАКТИРОВАТЬ: в ответ на оп комментария. margin: auto работает только для горизонтального центрирования, это по определению, как работают поля. для вертикального центрирования я использовал другую технику в прошлом, используя top: 50%, а затем используя отрицательное верхнее поле.

Я рекомендую эту статью alistapart:

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

и более алистапарт совершенство здесь:

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

Answer 4

Нашел решение. Если вы измените строку #overLayBackground> img на position: absolute; верх: 50%; слева: 50%; он работает как в IE, так и в FF, центрируя изображение по вертикали и горизонтали. Спасибо всем что откликнулись.