如何把overlay元素放在浏览器正中央

Question

如题，页面比较长，弹出overlay的按钮在页面下方，overlay弹出后相对页面在中央，但是相对浏览器的可见区域就偏上了，看不全。有什么方法让它相对浏览器的可见区域在最中间吗？它的css如下：
#editiplay{
background-color:#fff;
z-index:3000;
width:500px;
height:400px;
position:absolute;
top:40%;
left:50%;
margin-top:-200px;
margin-left:-250px;
}

Answer 1

overlay 元素? html 貌似木有这个元素吧

Answer 2

width:500px;
height:400px;
border:1px solid #fff;
margin:-200px 0 0 -250px;
position:absolute;
left:50%;
top:50%;

Answer 3

多调调CSS里面的top,button等等啊margin-top:-200px;
margin-left:-250px;

Answer 4

这样不行的，如果遇到页面长短不一的情况时就没法处理了。必须获取网页可见区域的高度，貌似是document.body.clientHeight，可是我不会用。

Answer 5

也就是overlay 的宽高 都是动态的?

Answer 6

#editiplay{
background-color:#fff;
z-index:3000;
width:500px;
height:400px;
position:fixed;
top:35%;
left:50%;
margin-top:-200px;
margin-left:-250px;
}

Answer 7

....额  既然overlay 的宽高都是固定的 那我的那个方法就绝对可以了.... 你自己试试就知道了  在不同的分辨率下面都是居中的 

Answer 8

这里纯CSS就可以搞定 不需要用JS了

Answer 9

试了呀，不行，但是把position由absolute改为fixed的话就可以了

Answer 10

是呀，我是js小白，同学让我用js实现获取屏幕的高度，我不会。后来才发现纯css就能行。

Answer 11

不一样啊，我使用js实现overlay的。