滾動時，在屏幕上保持未知高度和寬度的絕對定位div居中屏幕

Question

我試圖在滾動屏幕時保持屏幕上居中顯示未知高度和寬度的絕對定位div。 divs唯一的父母是body元素（如果它有所不同，它可以是固定的或相對的）。下面的代碼將把它居中在窗口中，但它會滾動頁面。

我更喜歡CSS解決方案，但也開放給一個JavaScript的 - 我認爲捕獲滾動事件和集中每一步。

謝謝！

這裏是一個jsFiddle

<div class="page-container"></div> 
<div id="wrapper"></div> 

body { 
    width:100%; 
} 
.page-container { 
    position: relative; 
    max-width:978px; 
    width: 100%; 
    min-height:2500px; 
    margin:0 auto -50px auto; 
    border:solid #999; 
    border-width:2px; 
    background: lightblue; 
} 

#wrapper{ 
    position: absolute; 
    height: 200px; 
    width: 200px; 
    left: 50%; 
    top: 50%; 
    transform: translate(-50%, -50%); 
    -o-transform: translate(-50%, -50%); 
    -webkit-transform: translate(-50%, -50%); 
    -moz-transform: translate(-50%, -50%); 
    background:lightyellow; 
    z-index: 200; 
    /* set min just to have something to show - it will be variable*/ 
    min-height: 200px; 
    min-width: 200px; 
    /*************/ 
} 

Answer 1

我想你可能需要使用position: fixed代替：https://jsfiddle.net/jLvgw6qj/