div的height、width设置为百分比之后如何让里面的元素垂直水平居中

效果展示：

方法很简单，将父盒子display：table，将里面的内容display：table-cell，还有就是要把body，html宽高也设置为100%，要不然盒子的高度会出现问题。

	
box

 

*{
    margin: 0;
    padding: 0;
}
body,html{
	width: 100%;
	height: 100%;
}
.box{
	width: 50%;
	height: 50%;
	border: 1px skyblue solid;
	text-align: center;
	vertical-align: middle;
	display: table;
}
.box span{
	display: table-cell;
	vertical-align: middle;
}