彻底搞懂水平垂直居中布局（定宽高和不定宽高）

这是面试常问的题目。今天就来彻底搞明白水平垂直居中的方法

一共七种方法，前两种是定宽高才能用的，后面五种不管需要垂直居中的元素有没有宽高都可以垂直居中。flex和table-cell和grid都需要有父元素的宽高，也就是说不能直接在body中水平垂直居中。

1.定宽高 绝对定位 + left/right/bottom/top + margin

2.定宽高 绝对定位和负magin值

3.有宽高和无宽高是一样的 绝对定位 + transform

4.有宽高和无宽高是一样的 flex 父元素必须要有宽高

5.有宽高和无宽高是一样的 grid 父元素必须要有宽高

6.有宽高和无宽高差不多 父元素必须要有宽高 table-cell + vertical-align + 直接设置成这个inline-block有宽高无宽高一样。设置margin: auto则时有宽高

7.定宽高不定宽高可以 flex变异