利用transform: translate(x,y)实现垂直居中

先贴出HTML代码,如下图:

HTML代码

再贴出CSS代码,并逐步解释,如下。

浏览器默认font-size=16px,又因为1rem=16px,故设置font-size: 62.5%;时,则1rem=10px,以便计算。
设置父级元素为position: relative;,以便其子级元素参照其左上角偏移(top/right/bottom/left)。
translate(x,y) 括号里填百分比数据的话,会以其本身的长宽做参考。

我们注释掉transform: translate(-50%,-50%);看一下效果。

可以看到淡蓝色方块左、上方距离外层方块的距离都是400个像素,如果我们想实现垂直水平居中,就应该将淡蓝色方块的中心点移动到目前元素左上角的位置,也就是分别向上和向左移动一半方块边长的长度,即50%个像素。

看下总效果。

总效果图

推荐阅读更多精彩内容