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';

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