1.块级元素水平居中
{
margin: 0 auto;
}
2.行内元素居中
text-align: center;
3.行内或者块级元素垂直居中
父元素的高度尽量不要固定，让它自适应，只有在父元素是全屏的情况下才有固定高度的垂直居中
- 上下padding相等
4.单行文本垂直居中
line-height = height;
5.父元素高度不固定垂直居中
- 只需让上下padding相等即可
6.父元素高度固定垂直居中
- 尽量不要出现这种情况，这是一个奇怪的需求（只有全屏时候才有这种需求）
- jscode上有7种，其中常用的就是flex(简单方便)和table(兼容性好)，其余5种属于炫技，面试知道即可
7.绝对居中
方法1
- 先绝对定位，让左上角的点绝对居中
- 再用负margin，达到理想效果
- 或者用
transform: translate(-50%, -50%);
- 或者用
postion: absolute;
left: 50%;
top: 50%;
margin:-aa -bb;
方法2——flex法
- 父元素display为flex
- 水平居中：
justify-content: center; - 垂直居中：
align-items: center;
方法3——table-cell实现垂直居中
- 父元素display为table-cell
- 子元素
vertical-align: middle;
