Question

我正在尝试垂直和水平居中显示div，这很好用，但是当我向下滚动页面并尝试底部的链接（它是一个注释框）时，它会显示在页面顶部，而不是在屏幕上，你需要向上滚动才能使用它。即使用户向下滚动，如何使其居中？

到目前为止，这是我的代码（来自我所做的研究）：

$("#comment").css('top', ((screen.height / 2) - ($('#comment').height()/2))+'px');
$("#comment").css('left', (screen.width / 2) - ($('#comment').width()/2)+'px');

提前致谢！

Answer 1

你需要通过JQuery做到这一点吗？也许你可以只用CSS风格吗？

CSS

#commentBox {
    position:fixed;
    top:0;
    bottom:0;
    left:0;
    right:0;
    margin:auto;
    height:240px;
    width:70%;
    padding:15px;
    border:1px dashed #333;
    background-color:#eee;
}

看看我的例子：FIDDLE

Answer 2

.scroll()

var comment = $("#comment"),
    com = $('#com');
$(window).scroll(function () {
    comment.css('top', ((screen.height / 2) - (com.height() / 2)) + 'px');
    comment.css('left', (screen.width / 2) - (com.width() / 2) + 'px');
});

即使页面向下滚动，中心div也会垂直和水平居中

2 个答案: