水平垂直居中布局

含意：水平垂直方向上都是居中的

1.利用table-cell，使表格内容对齐方式为middle，实现垂直居中；然后根据是行内元素还是块级内容采取不同的方式达到水平居中。

#parent{
    
    
	display:table-cell;
	vertical-align:middle;
	/*text-align:center;*//*如果是行内内容用这个*/
}
#child{
    
    
	display:table;
	/*margin:0 auto;*/ /*如果是块级元素添加这个*/
	}

2.定位position

• 原理：子绝父相，top，right，bottom，left的值是相对于父元素尺寸的，margin或者transform（变换，可对元素进行位移、旋转、缩放、倾斜操作，支持2D或者3D转换，IE9+支持。）是相对于自身尺寸的，组合使用达到水平局中的目的。

#parent{
    
    position:relative;}
    #child{
    
    
		position:absolute;
		top:50%;
		left:50%;
		/*①定宽高时等同于margin-left:负自身宽度一半；margin-top：负自身高度一半；*/
		/*②transform: translate(-50%,-50%);*//*translate：transform（变换）的方法tanslate（位移）*/
	}

若问尽可能多的实现水平垂直居中布局还有一种方法来解决：
将上下左右置为零并且给margin设置为auto

#parent{
    
    position:relative;}
    #child{
    
    
		position:absolute;
		top:0;
		bottom:0;
		left:0;
		right:0;
		margin:auto;
		width: 200px;
		height: 200px;
		background: red;
		
	}

3.利用flex实现：

flex会控制子元素的排列方式

#parent{
    
    
		display:flex;
		justify-content:center;//控制水平对齐
		align-items: center;//控制垂直对齐
		}