div 位于屏幕正中间_DIV一直显示在屏幕中间的2种方法

让一个div一直显示在屏幕中间在现在的建站中用到的比较多，特别是首页是欢迎页面的时候用的多

今天我给大家介绍2种不同的方法

第一种方法：

js 实现

原理： 窗口滚动条滚动，不断调整div的位置

这个div用来撑起真个页面

中间

$(function() {

$(window).scroll(function(){

var point = getObjWh1( "fd" );

$('#pos').html('x:'+point.x+',
y:'+point.y);

$('#fd').css( { position: "relative" , left: point.x , top:point.y } );

});

});

function getObjWh1(obj){

var point={};

var st=$(document).scrollTop();//滚动条距顶部的距离

var sl= $(document).scrollLeft();//滚动条距左边的距离

var ch=$(window).height();//屏幕的高度

var cw=$(window).width();//屏幕的宽度

var objH=$("#"+obj).height();//浮动对象的高度

var objW=$("#"+obj).width();//浮动对象的宽度

var objT=Number(st)+(Number(ch)-Number(objH))/2;

var objL=Number(sl)+(Number(cw)-Number(objW))/2;

point.x = objL ;

point.y = objT;

return point;

}

运行代码保存代码提示：您可以先修改部分代码再运行

第二种方法：

css + div 实现div 始终显示屏幕中间

原理：html 作为外层的容器一直都是窗口大小 ，如果内部东西超过边界则隐藏body 作为内层容器一直是窗口大小，内部内容高度大于窗口高度边界则滚动条滚动，但总体窗口位置一直不变内部不动的div是相对于窗口的位置，无论滚动条怎么滚动窗口不动，则这个div位置也不变化。

测试滚动

测试滚动

测试滚动

11111

运行代码保存代码提示：您可以先修改部分代码再运行

这两种方法都可以实现 ，在做这些效果的时候也许会有一点问题，慢慢看应该就可以解决了。