彻底搞懂--水平垂直居中

水平垂直居中是面试常考的环节
今天就一步一步分析下是怎么做到的，以前呢多少有点死记硬背的感觉，没真正去梳理过。

先看看整个实现的流程图片吧。

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做了进一步的解释。