html盒子居中的方法position

已知一个盒子的宽高

		.d1{
				height:200px;
				width:200px;
				background: #EAADEA;
				
				position: relative;/*相对定位*/
			}
			.d2{
				width:50px;
				height:50px;
				background: #DB7083;
				
				position: absolute;/*绝对定位，相对于父元素的定位*/
				top:50%;
				left:50%;
				margin-top:-25px;/*减去d2盒子一半的高*/
				margin-left:-25px;/*减去d2盒子一半的宽*/
			}

如果不减去的话效果如图：
不知道一个盒子的宽高

		.d1{
				height:200px;
				width:200px;
				background: #EAADEA;
				
				position: relative;/*相对定位*/
			}
			.d2{

				background: #DB7083;
				
				position: absolute;/*绝对定位，相对于父元素的定位*/
				top:30%;/*上边距的百分比*/
				left:20%;/*左边距的百分比*/
				right:20%;/*右边距的百分比*/
				bottom:30%;/*下边距的百分比*/
			}

绝对定位结合margin: auto，不需要提前知道尺寸，兼容性好。这个也是比较推荐的一种方式

.container {
    position: relative;
    height: 300px;
}
.item {
    width: 100px;
    height: 50px;
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}

js写法

var box=document.querySelector('.box')

	my()
	window.onresize=function(){
		my()
	}
	function my(){
	var x=document.documentElement.clientWidth;
		var y=document.documentElement.clientHeight;
		box.style.left=x/2-(box.offsetWidth/2)+'px';
		//可视区域的宽度/2-盒子本身的一半
		box.style.top=y/2-(box.offsetHeight/2)+'px';
}