水平居中
- 行内元素：给其父容器设置text-align:center
- 块级元素：首先设置宽度，然后margin：0 auto（必须设置宽度，因为块级元素默认占据一整行）
垂直居中
设置上下padding相等
-
绝对定位实现居中：
{
position:absolute;
left:50%; 框的左上角居中
top:50%;
margin-left:-xxpx;框宽度的一半
margin-top:-yypx;
width:2xxpx;
height:2yypx;
/transform:translate(-50%,-50%);/ 当框的宽高不定时可用，CSS3的属性*
} -
vertical-align实现居中（对同级元素共同进行居中，必须有另一个元素作为参照）：设置伪元素（父容器下的第一个子元素）
.box{
width:
height:
}
.box:before{
content:"";
display:inline-block;
height:100%;首先父容器得设置height、
vertical-align:middle;
} table-cell实现居中：父元素的display设置为table-cell，vertical-align为middle，子元素可实现垂直居中，此时父元素不为块级元素，若不设宽度为自动收缩。
-
父容器display:flex设置居中
{
width:
height:
display:flex;
align items:center;垂直居中
justify content:center;水平居中
}
