行内元素居中
1,text-align : center —— 实现行内元素居中。
2,line-height：父元素的高度 —— 实现单行文本垂直居中。
3,display:table-cell，vertical-align:middle —— 实现行内元素垂直居中(多用于多行文本，也可以将子元素设置inline-block来实现块级居中)。
块级元素居中
1, 元素定宽 + margin: 0 auto —— 实现水平居中。
Q: 为什么margin:0 auto能实现水平居中？
A: 水平方向的margin,其计算值取决于可用空间（剩余空间）。那么margin-left:auto实现的是右对齐,相反margin-right实现的是左对齐，所以margin: 0 auto可以实现水平居中。
Q: margin:0 auto 是否等于margin: auto？
A: 大多情况下等于，一般来说margin-top，和bottom计算值为0。
Q： margin:auto 0 为什么无法实现垂直居中？
A： 有人说是因为元素高度不确定，有人W3C没有给出相关规定，一直没有找到满意的答案。
2，absolute/fixed + top/left：50% + margin-left/top:-(自身宽度的一半) —— 实现水平垂直居中。
Q: 怎么实现的？
A: 以水平居中来说，absolute/fixed的百分比单位相对于父元素的宽，也就是该元素向右偏移父元素一半的距离，而该元素的左侧边框是父元素中分线，所以再将该元素向右偏移自身元素的一半就可水平居中，垂直居中同理。
补充: 如果不知道该元素的宽高，可以用translate:(-50%,-50%)来实现，该百分比参照物相对自身宽高。
3,margin:auto 实现水平垂直居中。
box{
position: absolute;或fixed
top:0;
right:0;
bottom:0;
left:0;
margin: auto;
}
Q:怎么实现的？
A：待续。
4,flex 布局 justify-content: center; align-items:center;
常用于移动端，PC兼容性较差。