1.塊級元素水平居中

{
  margin: 0 auto;
}

2.行內(nèi)元素居中

text-align: center;

3.行內(nèi)或者塊級元素垂直居中

父元素的高度盡量不要固定，讓它自適應(yīng)，只有在父元素是全屏的情況下才有固定高度的垂直居中

• 上下padding相等

4.單行文本垂直居中

line-height = height;

5.父元素高度不固定垂直居中

• 只需讓上下padding相等即可

6.父元素高度固定垂直居中

• 盡量不要出現(xiàn)這種情況，這是一個奇怪的需求（只有全屏?xí)r候才有這種需求）
• jscode上有7種，其中常用的就是flex(簡單方便)和table(兼容性好)，其余5種屬于炫技，面試知道即可

7.絕對居中

方法1

• 先絕對定位，讓左上角的點絕對居中
• 再用負(fù)margin，達(dá)到理想效果
  • 或者用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實現(xiàn)垂直居中

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