徹底搞懂水準垂直居中布局（定寬高和不定寬高）

這是面試常問的題目。今天就來徹底搞明白水準垂直居中的方法

一共七種方法，前兩種是定寬高才能用的，後面五種不管需要垂直居中的元素有沒有寬高都可以垂直居中。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變異