利用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%个像素。

看下总效果。

总效果图