程度垂直居中是面试常考的环节
明天就一步一步剖析下是怎么做到的,以前呢多少有点死记硬背的感觉,没真正去梳理过。
先看看整个实现的流程图片吧。
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 做了进一步的解释。