使一个div始终显示在页面中间

使一个div始终显示在页面中间

假设我们有一个div层:<div id=”myDiv”></div>

首先，我们用css来控制它在水平上始终居中，那么我们的css代码应该是这样:

<style type=”text/css”>

*{margin:0;padding:0;}

#myDiv{width:400px;height:200px;margin:0 auto;}

</style>

这里的400px是你需要居中设置的div的宽度，200px是它的高，margin:0 auto;是控制水平居中的代码

jquery代码应该是这样:

<script type=”text/javascript”>

$(function{

//获得当前浏览器的内部高(即:不包含外边框和地址栏，工具栏的高)

var height = window.innerHeight;

//设置内容显示在中间

//这里的200是你要居中显示的div层的高，注意这里没有px

if(height> 200){

//设置要居中显示的div层的外边距

//myDiv是它的id

$("#myDiv").css("margin-top",(height-200)/2);

}

//设置当浏览器的大小改变时触发的事件

$(window).resize(function(){

//获得当前浏览器的高

varheight = window.innerHeight;

//设置内容显示在中间

if(height> 200){

$("#myDiv").css("margin-top",(height-200)/2);

}

});

});

</script>