CSS样式让元素上下左右居中

一、元素垂直居中

让父元素高度自适应，子元素高度自动撑开父级的高度，再给父元素设置相同的上下边距。

二、 元素水平居中

1. 子元素宽度低于父盒子宽度，可设置子盒子的margin值，水平方向的值都设置为auto。（auto只在水平方向有作用，边距会自动无限增大，直到撑满整个父元素除了子元素宽度之外剩余的区域，如果两个水平方向都是auto，两边都要无限大，只能达到一个平衡，两边距离相同，导致盒子居中。）
2. 子元素宽度大于父盒子宽度，设置子元素相对定位，设置偏移量left=50%，[a、设置子盒子margin-left=(子盒子自身宽度的一半的负数)]或者[设置子盒子位移transform=translate(-50%)]。

.son {
	position : relative;
	left : 50%;
	top : 50%;
	width : 100px;
	height : 100px;
	/* 让 子元素 在父元素 中 水平居中*/
	margin-left : -50px; 
	/* 让 子元素在 父元素 垂直居中*/
	margin-top : -50px;
	
	/*或者 采用位移直接 ，和 上面的选择一种即可*/
	/*translate(x,y)分别为水平和垂直方向位移的距离*/
	transform = translate(-50%,-50%) 
}