java将定位在屏幕中间_css+js定位到屏幕中间

ex:让一个div始终显示在屏幕中间

一、

css:#idName{position: absolute;z-index: 999;width: ？px;margin-top: ？px;}//此处的初始定位按具体的自己调

计算并设置页面滚动条改变时移动的距离：

function sc1(idName) {

var d = document.getElementById(idName);

d.style.top = (document.documentElement.scrollTop + (document.documentElement.clientHeight - d.offsetHeight) / 2) 【此处加上或减去上移或者下移的高度】+ "px";

d.style.left = (document.documentElement.scrollLeft + (document.documentElement.clientWidth - d.offsetWidth) / 2) + "px";

}

function scall() {

sc1("idName");

}

window.onscroll = scall;

window.onresize = scall;

window.onload = scall;

若是和diaplay一起使用  在显示后再调用

window.onscroll = scall;

window.onresize = scall;

二、纯css实现始终显示在屏幕中间

ex:

#div_window {

width: 400px; /**宽度**/

height: 300px; /**高度**/

position: fixed; /**定位采用此种方式**/

left: 50%; /**左边50%**/

top: 50%; /**顶部50%**/

margin-top: -100px; /**上移-50%**/

margin-left: -150px; /**左移-50%**/

display: none;

border: 1px black solid;

background-color: #DCDCDC;

}

样式和宽高自己定，根据宽高调整margin-top，margin-left  将它调到页面中间即可。滚动时便会根据位置显示在屏幕中间。