div内部元素实现水平垂直居中总结

（1）flex弹性布局
第一种实现办法（align-self: center）：

.box{
			width: 300px;
			height: 300px;
			background-color: red;
			/*弹性布局，子元素float，vertical-align，clear失效*/
			display:flex;
		}
		.box_child{
			width: 200px;
			height: 200px;
			background-color: yellow;
			/*在box下水平居中*/
			margin: 0 auto;
			/*弹性布局子元素垂直居中*/
			align-self: center;
		}

第二种办法（align-items: center）：

.box{
			width: 300px;
			height: 300px;
			background-color: red;
			/*弹性布局，子元素float，vertical-align，clear失效*/
			display:flex;
			/*弹性布局子元素垂直居中*/
			align-items: center;
			/*子元素水平居中*/
			justify-content: center;
}
.box_child{
			width: 200px;
			height: 200px;
			background-color: yellow;
}

alignItems和justifyContent配合使用，前者是侧轴布局，后者是主轴布局。

（2）子元素已知宽度

.box{
			width: 300px;
			height: 300px;
			background-color: red;
			position: relative;
}
.box_child{
			width: 200px;
			height: 200px;
			background-color: yellow;
			position: absolute;
			/*子盒子左上角在父盒子中心*/
		    left: 50%;
		    top: 50%;
		    /*上外边距减少100px，左外边距减少100px*/
		    margin: -100px 0 0 -100px;
}

（3）子盒子为absolute布局

.box{
			width: 300px;
			height: 300px;
			background-color: red;
			position: relative;
}
.box_child{
			width: 200px;
			height: 200px;
			background-color: yellow;
			/*水平居中*/
			margin: auto;
			/*绝对布局*/
		    position: absolute;
		    top: 0;
		    left: 0;
		    right: 0;
		    bottom: 0;
}

子盒子为absolute时，父盒子布局也可以为absolute。
（4）万能布局
无论宽高是百分比还是固定，还是没有设置。都可以用以下进行水平垂直居中。

.box{
			width: 300px;
			height: 300px;
			background-color: red;
			position: absolute;
}
.box_child{
			width: 50%;
			height: 50%;
			background-color: yellow;
			position: absolute;
			/*子盒子左上角在父盒子中心*/
			top: 50%;
			left: 50%;
			/*针对谷歌浏览器*/
			-webkit-transform: translate(-50%,-50%);
			/*针对IE浏览器*/
			-ms-transform: translate(-50%, -50%);
			/*针对火狐浏览器*/
			-moz-transform: translate(-50%,-50%);
			/*子盒子x轴左移50%，y轴上移50%*，子盒子中心在父盒子的中心*/
}

当然你也可以把那3个浏览器对应的代码直接换成transform: translate(-50%,-50%);
子父布局可以写成两个都为relative或者absolute；子布局单独为relative；父布局为relative，子布局为absolute;父布局为absol，子布局为relative。
注：line-height是行高，盒内元素单行时可用其设置跟高度相同实现垂直居中，多行时实现不了垂直居中效果。