块级元素中的行内元素水平垂直居中
1.块级元素中的行内元素的水平居中
给包裹该行内元素的块级元素增加居中属性
text-align:center;
2.块级元素中的行内元素的垂直居中
2.1内容可变的 高度不要写死，使用padding上下填充即可。
padding:30px 0px;
2.2内容不变的，一般是单行文字，多用于按钮。使用高度和行高一致即可。
height:40px;
line-height:40px;
块级元素在块级元素中的水平垂直绝对居中
1.块级元素(有固定宽度的)在页面上的水平居中。块级元素本身加属性。
margin:0 auto；
2.块级元素(有固定宽度的)在页面上的全屏。
2.1 适用场景 整屏全屏，一个整屏接一个整屏的。
html,body{
height:100%;
}
.test1 {
height:100%;
background:blue;
}
.test2 {
height:100%;
background:red;
}
2.2 适用场景 弹窗
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
3. 全屏垂直居中
3.1 宽高是固定死的
width:200px;
height:200px;
position:absolute
left:50%;
right:50%;
margin-left:-100px;(宽度一半)
margin-top:-100px;（高度一半）
3.2 宽高不知，由内容撑开
position:absolute
left:50%;
right:50%;
transform:translate（-50%，-50%）;
4 块级元素转化为表格
display:table-cell;
vertical-align: middle;
未完待续......
