CSS-居中总结

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法

1. 父元素display为flex
2. 水平居中：justify-content: center;
3. 垂直居中：align-items: center;

方法3——table-cell实现垂直居中

1. 父元素display为table-cell
2. 子元素 vertical-align: middle;