实现元素水平居中（简便好记的方法）

1.定位+transform

给居中元素

div.box{
position:absolute;
<!--设置元素的定位位置，距离上、左都为50%-->
left:50%;
top:50%;
<!--设置元素的相对于自身的偏移度为负50%(也就是元素自身尺寸的一半)-->
transform:translate(-50%,-50%);
}

2.四个零+margin：auto

给居中元素

div.box{
weight:200px;
height:400px;
position:absolute;
<!--设置元素的定位位置，距离上、下、左、右都为0-->
left:0;
right:0;
top:0;
bottom:0;
<!--设置元素的margin样式值为 auto-->
margin:auto;
}

3.flex布局

.parent{
  	display:flex;
    justify-content: center;
    align-items: center;
}

4.grid布局

.parent{
  	display:grid;
    justify-items: center;
    align-items: center;
}

5.利用flex或grid布局结合margin：auto

此方法最为简洁

.parent{
	display:flex;	//或者grid也行
}

.box{
	margin:auto;
}