Абсолютное Div движется вниз, когда высота страницы динамически увеличивается

Question

У меня проблема с моим всплывающим окном. Когда высота страницы увеличивается вертикально, всплывающий div также перемещается вертикально вниз. У меня есть два div. Один - это одеяло, которое является черным прозрачным слоем, а другое - всплывающим окном, которое накладывается поверх него.

CSS:

#blanket { 
    background-color: #111; 
    opacity: 0.65; 
    position: absolute; 
    z-index: 9001; 
/*above nine thousand*/ 
    top: 0px; 
    left: 0px; 
    width: 100%; 
} 

#validationPopup { 
    position: fixed; 
    background-color: #eeeeee; 
    border: 5px solid #68ad0e; 
    width: 300px; 
    height: 125px; 
    margin-top: -150px; 
    margin-left: auto; 
    margin-right: auto; 
    -moz-border-radius: 16px; 
    -webkit-border-radius: 16px; 
    border-radius: 16px; 
    box-shadow: 12px 0 15px -4px #000000, -12px 0 15px -4px#000000; 
    -moz-box-shadow: 12px 0 15px -4px #000000, -12px 0 15px -4px#000000; 
    -webkit-box-shadow: 12px 0 15px -4px #000000, -12px 0 15px -4px#000000; 
    z-index: 9002; 
/*above nine thousand*/; 
} 

HTML:

<div id="blanket" style="display:none;"></div> 
<div id="validationPopup" style="display:none;"> 
    </br> 
    <a href="javascript:void(0)" style="text-decoration:none;color:#060;" onclick="popup('validationPopup')"> 
     <div align="right">close[X]&nbsp;&nbsp;&nbsp;</div> 
    </a> 
    <br> 
    <div id="validationMessage" align="center"></div> 
</div> 

Я хочу всплывающий быть в середине окна, даже если высота страницы увеличивается динамически.

Редактировать 1: Я пробовал position: absolute, но он все еще не работает.

**I also want the Div to be populated in center of the browser (not center to the total height)** 

Answer 1

Набор left и top как к 50% и добавить запас минус половины всплывающей размера:

#validationPopup { 
    position: fixed; 
    background-color:#eeeeee; 
    border:5px solid #68ad0e; 
    width:300px; 
    height:125px; 
    margin-top:-62px; 
    top: 50%; 
    left: 50%; 
    margin-left: -150px; 
    -moz-border-radius: 16px; 
    -webkit-border-radius: 16px; 
    border-radius: 16px; 
    box-shadow: 12px 0 15px -4px #000000, -12px 0 15px -4px#000000; 
    -moz-box-shadow: 12px 0 15px -4px #000000, -12px 0 15px -4px#000000; 
    -webkit-box-shadow: 12px 0 15px -4px #000000, -12px 0 15px -4px#000000; 
    z-index: 9002; 
} 

фона необходимо height:100%:

#blanket { 
    /* ... */ 
    height: 100%; 
} 

Fiddle