JS实现-DIV自动居中代码

  • 编辑时间: 2015-03-17
  • 浏览量: loading
  • 作者: 段亮

其实想让整个DIV盒子在页面实现自动居中非常简单,只需要一小段JS代码代码就可以实现。有时候我们做页面效果也好,做程序功能的开发也好。只要思路理清楚了,相信做起来会非常的得心应手。

  下面就跟大家一起简单分析下JS是如何实现让DIV盒子,在页面自动居中,并且随着页面的变动,也能居中。

思路:

      一、首先我们的DIV盒子模型,一般是绝对定位于浏览器的,那么首先我们可以先获取整个页面(浏览器的可视区)的宽度、高度。

      二、然后获取自身DIV盒子的宽度、高度。

      三、用浏览器可视区的宽度、高度,减去DIV自身的宽度,高度,然后除以2。就可以获取到DIV距离页面的top值,left值。在赋值给DIV相应的top值,left值。

      四、随着我们的浏览器窗口的改变,让DIV盒子也能随着页面的改变而居中。(利用onresize事件)

代码截图:

    JS实现-DIV自动居中代码1.jpg

代码如下:

<!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>

点击预览

本文由段亮博客,原创出品,如需转载请注明出处。

    本文出处:http://www.duanliang920.com/learn/web/tx/299.html

如果您觉得文章对你有帮助,可以进行打赏。
打赏多少,您高兴就行,谢谢您对段亮这小子的支持! ~(@^_^@)~

微信扫一扫 微信打赏

支付宝扫一扫 支付宝打赏

评论列表(网友评论仅供网友表达个人看法,并不表明本站同意其观点或证实其描述)

你也想建立一个独立博客?

你是否也想打造一个在互联网上的个人品牌,成为一个家喻户晓的人物呢?
请点击了解 怎样创建个人博客