JS实现-DIV自动居中代码-段亮个人博客

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

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

思路：

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

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

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

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

代码截图：

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

代码如下:

<!doctypehtml>

  <html>

  <head>

    <metacharset="utf-8">

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

      <metaname="keywords"content="" />

      <metaname="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>

    <divid="box">
      </div>

      <script>
        window.onload = function() {

          functionbox() {

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

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

            //获取元素自身的宽度

            varL1 = oBox.offsetWidth;

            //获取元素自身的高度

            varH1 = 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