水平垂直居中是面試常考的環節
今天就一步一步分析下是怎麼做到的，以前呢多少有點死記硬背的感覺，沒真正去梳理過。

先看看整個實現的流程圖片吧。

1、當left：50%如圖1
2、當top:50% 如圖2
3、要想呈現如圖3的情況，有兩種實現方案
（1）方案1
在已知目標對象寬高的情況下，可以通過設置margin-left:-寬/2
margin-top:-高/2就可以。
（2）方案2
在未知目標對象寬高情況下，用transform:translate(-50%. -50%)
即可。
為何translate(-50%. -50%)這樣設置就能實現呢？
因為translate(x,y,z)移動是相對自己的中心位置來偏移的，
2圖可看出，目標對象中心位置正好距離視圖中心位置x，y相差-50%*目標對象的寬或高，所以這種方法可以實現。
這裏就稍微對過程的實現步驟和translate做了進一步的解釋。