JS实现在不知道盒子宽高的情况下，默认让盒子在页面中水平垂直居中

当然在我们知道宽高的情况下，
1、我们通过CSS的中的绝对定位实现

#box{
    width:100px;
    height:100px;
    position:absolute;
    top:50%;
    left:50%;
    margin-top:-50px;
    margin-left:-50px;
}

2、通过CSS中的margin=auto,四个方向都为0的方法也可以实现

#box{
    width:200px;
    height:200px;
    margin:auto;
    position:absolute;
    top:0;
    right:0;
    bottom:0;
    left:0;
}

3、可以通过CSS3的弹性布局（flex），实现盒子的居中
废话不多说，直接上代码.

body {
       display: flex;
       align-items: center; /*定义body的元素垂直居中*/
       justify-content: center; /*定义body的里的元素水平居中*/
     }
#box{
    height:200px;
    width:200px;
    background-color:red;
}

不知道宽高的情况下

我们可以通过JS中先获取一屏的宽高，再获取到盒子的宽高。

var  windH = document.documentElement.clientHeight||document.body.clientHeight;     //获取一屏的高度。(两种写法为了兼容所有浏览器)

var  windW = document.documentElement.clientWidth||document.body.clientWidth;     //获取一屏的宽度。

var boxH = document.getElementById('box').offsetHeight;  //获取盒子的高度（border(top\bottom)+padding(top\bottom)+height）

var boxW = document.getElementById('box').offsetWidth;  //获取盒子的宽度（border(left\right)+padding(left\right)+width）

#box.style.top=(winH-boxH)/2+'px';
#box.style.left=(winW-boxW)/2+'px';

以上几种方式都可以使得盒子水平垂直居中。。。