中心div垂直和水平居中，即使向下滚动页面 [英] Center div vertically and horizontally center even when page scrolled down

问题描述

我试图显示一个div垂直和水平中心，这工作正常，但当我向下滚动页面，尝试在底部的链接（它是一个注释框），然后它显示在页面的顶部，而不是在屏幕上，你需要向上滚动才能使用它。

I am trying to display a div vertically and horizontally center, and this works fine, but when I scroll down the page and try the link at the bottom (it is a comment box) then it displays at the top of the page, not in the screen, and you need to scroll up to use it. How can I get it centered even if the user has scrolled down?

这里是我的代码（从我做过的研究）：

Here is my code so far (from the research I have done):

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

提前感谢！

推荐答案

你需要通过JQuery这样做吗？
也许你可以只是CSS样式吗？

Do you need to do this via JQuery? Maybe you can just CSS style it?

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

这篇关于中心div垂直和水平居中，即使向下滚动页面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！