css样式实现居中
左右居中：
1，text-align: center;//实现行内元素的左右居中显示
2，margin：0 auto;//实现块级元素的左右居中显示
垂直居中：
1，在固定高度的情况下，使用line-height：父元素高度;实现行内元素的垂直居中。
2，利用position: relative;、margin-top:-(盒子的高度的一半);、top:50%;实现垂直居中，相对定位可以使用top，top占据父元素高度一半，margin-top设置负数，盒子向上挪动自身高度一半实现居中。
3，利用position: relative;、transform: translateY(-50%);、top:50%;实现垂直居中，相对定位可以使用top，top占据父元素高度一半，transform: translateY(-50%);使得盒子向上挪动自身高度一半实现居中。
4，父元素设置display: table;
子元素设置display: table-cell;vertical-align: middle;//实现垂直居中
text-align: center;//子元素前面的样式加上这句实现垂直和左右居中
同时实现垂直和左右居中
1，子绝父相，子元素样式设置：
margin-left: auto;
margin-right: auto;
margin-top: auto;
margin-bottom: auto;
2，弹性盒子flex实现居中
display: flex;
align-items: center; /*定义父元素的元素垂直居中*/
justify-content: center; /*定义子元素的里的元素水平居中*/