一、水平居中
1、行内元素
父元素设置text-align:center.
2、块级元素
margin:0 auto;
二、块级元素垂直居中
1、上下padding相等
容器高度不固定，高度由内容撑开
2、绝对定位
宽高固定
设置left:50%，top:50%，配合负margin，margin-top和margin-left：- 宽高的一半宽高不定
设置left:50%，top:50%，
transform:translate(-50%,-50%);//相对自己移动
只适用于ie9+
注：设置margin百分比是相对容器
3、flex
.space {
display: flex; /* 弹性布局 /
align-items: center; / 垂直居中 /
justify-content: center; / 水平居中 */
}
三、行内元素垂直居中
1、原理是设置一个与容器等高的元素，使元素与其中线对齐
- vertical-align只对display：inline-block有效
- 对于对于可替换元素（如 img、input、select 等），不存在 content （内容或后代元素）在标签中，伪元素无效，所以写在父标签中
.box:before{
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
}
.box img{
vertical-align: middle;
background: blue;
}
2、父容器设置成表格元素，td中设置 vertical-align自动对齐
- 父元素大小可能会改变
.box{
width: 300px;
height: 200px;
border: 1px solid ;
display: table-cell;
vertical-align: middle;
text-align: center;
}
3、使用absolute
