css如何通过布局实现盒子水平垂直居中

通过布局实现盒子垂直水平居中

大致思想有两种
通过POSITION定位布局实现
通过DISPLAY:FLEX伸缩盒布局实现

Position

.father{
	height:100px;
	width:100px;
	position:relative;
}
.child{
	height:10px;
	width:10px;
	position:absolute;
	left:0;right:0;top:0;bottom:0;
	margin:auto;
}

或者

.father{
	height:100px;
	width:100px;
	position:relative;
}
.child{
	height:10px;
	width:10px;
	position:absolute;
	//50%指父元素的50%，5px为子元素的一半高度，这样正好让子元素垂直居中，50%、减号、5px之间要空格
	margin-top:calc(50% - 5px);
	//水平居中同理
	margin-left:calc(50% - 5px);
	//可以写成不同的形式，但是思想相同
}

Display

.father{
	height:100px;
	width:100px;
	display:flex;
	justify-content:center;
	align-items:center;
}