共计 382 个字符，预计需要花费 1 分钟才能阅读完成。
程度垂直居中是面试常考的环节
明天就一步一步剖析下是怎么做到的，以前呢多少有点死记硬背的感觉，没真正去梳理过。
先看看整个实现的流程图片吧。
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 做了进一步的解释。
正文完