Наложение DIV в центре окна браузера

Question

Я использую анимацию jQuery, чтобы погладить изображения, и для этого два изображения находятся в DIV внутри DIV, чтобы сделать его похожим на одно затухание в другом, и один расположен поверх другого. Он работает, все, что я хочу сделать, это переместить его в центр моей страницы и не может заставить его работать. Вот HTML и CSS. Я пробовал модифицировать поля, верхнее и левое позиционирование и т. Д., Но ничего не сработало. Спасибо за любую обратную связь.

EDIT: То, что я хочу, это один DIV непосредственно поверх другого. Они оба заполнены одним и тем же изображением, за исключением того, что вокруг него появляется свечение, которое я создал в программном обеспечении для редактирования. Когда страница загружается, jQuery запускает первый div, .fade, исчезает и позволяет другому div, .inside исчезать, создавая анимацию, которая заставляет ее выглядеть так, как если бы одно изображение медленно менялось на другое. Это уже происходит автоматически и работает отлично. Я просто хотел бы, чтобы изображения были центрированы непосредственно в середине окна браузера, так как это происходит вместо автоматического размещения слева.

CSS

.container 
    { 
     position:relative; 
    } 
    .fade 
    { 
     position: absolute; 
     z-index:1; 
     top:0; 
     left:0; 
    } 
    .inside 
    { 
     position: absolute; 
     display: none; 
     z-index:2; 
     top:0; 
     left:0; 
    } 

HTML

<div class="container"> 
      <div class="fade"> 
       <img src="namelarge.png" /> 
        <div class="inside"> 
         <img src="nameglow.png" /> 
        </div> 
      </div> 
     </div> 

EDIT: Вот мой JQuery

$(window).load(function() { 
setTimeout(function() { 
    $('div.fade > div') . fadeIn(3000) // 3 second fade in 
}, 2000) // after 2 seconds. }) 

Answer 1

Я предполагаю, что вы пытаетесь центрировать .fade DIV в пределах. контейнер div.

вынимает верхнее и левое свойство от .fade CSS, определить свойство ширины, а также добавить:

margin: 0 auto; 

это должно центрировать его по горизонтали.

Answer 2

, если вы хотите, чтобы центрировать .fade Див попробовать:

.fade { 
position:relative; 
width:50px; 
z-index:1; 
margin:auto; 
} 
.inside { 
position: absolute; 
display: none; 
z-index:2; 
top:0; 
left:0; 
} 

Проверьте здесь: jsfiddle.net/TcfBH/ (v2)