首页 > 分享 > 正文

用js将一个div自动居中
2018-09-01 17:48:27   来源:灰灰   评论:0 点击:

其实想让整个DIV盒子在页面实现自动居中非常简单,只需要一小段JS代码代码就可以实现。有时候我们做页面效果也好,做程序功能的开发也好。
其实想让整个DIV盒子在页面实现自动居中非常简单,只需要一小段JS代码代码就可以实现。有时候我们做页面效果也好,做程序功能的开发也好。只要思路理清楚了,相信做起来会非常的得心应手。
 
  下面就跟大家一起简单分析下JS是如何实现让DIV盒子,在页面自动居中,并且随着页面的变动,也能居中。
 
思路:
 
      一、首先我们的DIV盒子模型,一般是绝对定位于浏览器的,那么首先我们可以先获取整个页面(浏览器的可视区)的宽度、高度。
 
      二、然后获取自身DIV盒子的宽度、高度。
 
      三、用浏览器可视区的宽度、高度,减去DIV自身的宽度,高度,然后除以2。就可以获取到DIV距离页面的top值,left值。在赋值给DIV相应的top值,left值。
 
      四、随着我们的浏览器窗口的改变,让DIV盒子也能随着页面的改变而居中。(利用onresize事件)

 <!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>JS实现-DIV自动居中代码</title>

<meta name="keywords" content="" />

<meta name="description" content="" />

<style>

*{margin:0;padding:0}

#box{width:100px;height:100px;position:absolute;top:30px;left:20px;border:1px solid red;}

</style>

</head>

<body>

<div id="box"></div>

<script>

window.onload = function(){

    function box(){

    //获取DIV为‘box’的盒子

    var oBox = document.getElementById('box');

    //获取元素自身的宽度

    var L1 = oBox.offsetWidth;

    //获取元素自身的高度

    var H1 = oBox.offsetHeight;

    //获取实际页面的left值。(页面宽度减去元素自身宽度/2)

    var Left = (document.documentElement.clientWidth-L1)/2;

    //获取实际页面的top值。(页面宽度减去元素自身高度/2)

    var top = (document.documentElement.clientHeight-H1)/2;

    oBox.style.left = Left+'px';

    oBox.style.top = top+'px';

    }

    box();

    //当浏览器页面发生改变时,DIV随着页面的改变居中。

    window.onresize = function(){

        box();

    } 

}

</script>

</body>

</html> 

相关热词搜索:API handler does not exist

上一篇:Linux虚拟主机301重定向方法
下一篇:手机网站引入第三方视频

分享到: 收藏
这里空拉拉的一点都不好看,我加个这个盒子可能会好看些,只是可能啊!我觉得......
看了下还是不好看,那再加一个......
看了下还是不好看,以后在这价格留言功能什么的可能会好些......