通过JavaScript使div随时居中

学习内容：

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

思路：

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

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

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

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

学习代码：

css

<style>
    *{
   
        padding: 0;
        margin: 0;
    }
    #box{
   
        width: 300px;
        height: 300px;
        background