Question

以下是我正在做的事情并且确实有效：

#myDiv { background: red; width: 100px; height: 100px; margin-top: -50px; margin-left: -50px; position: absolute; top: 50%; left: 50%; }

<div id="myDiv"></div>

但问题是当我向下滚动页面时，div不再出现在中心，因为它相对于原始视口高度位于顶部50％，而不是当前的高度。所以我想我必须听一个文件滚动事件并动态更新div的位置。知道怎么做吗？

基本上我所追求的效果是即使用户滚动，div也始终位于中心。

或者甚至有一个纯粹的CSS解决方案？

Answer 1

使用position: fixed;代替position: absolute; 定位（顶部，左侧等）将保持不变，但与窗口相关，而不是文档。

http://jsfiddle.net/jasongennaro/25WAg/

Answer 2

你想要position: fixed;。

要在屏幕中心实现div，您需要left: 50%; margin-left: -50px;

请注意，负边距 - 左边是容器宽度的一半

Answer 3

#myDiv {
    background: red;
    width: 100px;
    height: 100px;
    margin: auto;
    position: fixed;
}

#container {
    width: 90%;
    height: 90%;
}

然后是你的HTML：

<div id="container">
    <div id="myDiv">DATA</div>
</div>

告诉我它是否有效。

如何将div放在页面的绝对中心？

3 个答案: