DIV一直显示在屏幕中间的2种方法

发表于2014-05-05 13:39| 次阅读| 来源整理| 作者管理员

摘要：我给大家介绍2种让div显示在屏幕中间的方法...

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

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

第一种方法：

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

<!DOCTYPE unspecified PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <body> <body> <div style="position: absolute;height: 2000px;border: 1px solid green;"> <div style="margin-top: 400px">这个div用来撑起真个页面</div> </div> <div id="fd" style="height:100px;width:100px;z-index:9999;border:1px solid red"> 中间<br><span id="pos"></span> </div> </body> <script type="text/javascript" src="/style/js/jquery-1.8.0.min.js"></script> <script language="javascript"> $(function() { $(window).scroll(function(){ var point = getObjWh1( "fd" ); $('#pos').html('x:'+point.x+',<br>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; } </script> </html>
运行代码保存代码提示：您可以先修改部分代码再运行

第二种方法：

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

<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title> </title> <style> *{ padding:0px; margin:0px; margin-right:10px; margin-bottom:10px; } html{border:4px solid red} /*height与width 改成 100% 这里方便观看现象*/ body,html{height:98%; width:98%; } html{overflow:hidden;} body{overflow-y:auto } .display{ position:absolute; left:50%; top:50%; height:300PX; width:500PX; margin-left:-250PX; margin-top:-150PX; border:1PX solid #F00; } </style> </head> <body style="border:4px solid red"> <DIV style="height:2000PX;">测试滚动</DIV> <DIV style="height:2000PX;">测试滚动 </DIV> <DIV style="height:2000PX;">测试滚动</DIV> <div class="display">11111</div> </body> </html>
运行代码保存代码提示：您可以先修改部分代码再运行

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