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

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

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

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

<style type=”text/css”>

       *{margin:0;padding:0;}

       #myDiv{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>