Question

我正在尝试在滚动时保持屏幕中心的未知高度和宽度的绝对位置div。仅divs父项是body元素（如果它有所不同，可以是固定的或相对的）。以下代码将在窗口中居中，但它将滚动页面。

我更喜欢CSS解决方案，但我也可以使用javascript - 我假设捕获滚动事件并以每次移动为中心。

谢谢！

<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/

在滚动时，保持屏幕中心的未知高度和宽度的绝对定位div

1 个答案: