设置盒子垂直水平居中的方式

/* 第一种方法:文本,行高 */
.box1{
	text-align: center;
	line-height: 50px;
}
.box1>div{
	display: inline-block;
	vertical-align: middle;
	line-height: initial;
	text-align: left;
}

/* 第二种方法 弹性布局  父级display:flex*/
.box2{
	display: flex;
	justify-content: center;
	align-items: center;
}

/* 第三种方法:定位法 */
.box3{
	position: relative;
}
.box3>div{
	top:50%;
	left:50%;
	position: absolute;
	transform: translate(-50%,-50%);
}

/* 第四种方法:父级display:grid法 */
.box4{
	display: grid;
}
.box4>div{
	justify-self: center;
	align-self: center;
}

/* 第五种方法:父级display:table法 */
.box5{
	display: table;
}
.box5>div{
	display: table-cell;
	text-align: center;
	vertical-align: middle;
}