javascript - 滚动时保持高度和宽度未知的绝对定位 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/