假设我们有一个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>
时间: 2024-10-10 00:49:59