垂直水平居中

1.center{

display:flex  flex布局

align-items:center 独自居中排列    设置在垂直方向上的排列方式  align-items

justify-content:center   设置在主轴上的排列方式   水平方向 x轴

}   //父元素

2.center{

width:100px;

height:100px;

position:absolute;

left:50%;

top:50%;

margin-top:-50px;//高度的一半

margin-left:-50px// 宽度的一半}   //需要居中的子元素

3未知宽高

.center{position:absolute;

left:50%;top:50%;

transform:translate(-50%,-50%)}//需要居中的子元素

4.center{display:table-cell;

text-align:center;

vertical-align:middle

}//父元素使用

5.center{

position:absolute;

left:0;

top:0;

right:0;

bottom:0;

margin:auto;

}//子元素使用