垂直居中，当不确定父类高度时

如果知道父类的高度，文字居中可以直接用line-height属性来做。
但是如果父类的高度是会变化的，比如下面的demo，会随body来变化，则需要用绝对定位和位偏移属性了。

参考资料

CSS3 transform-translate
CSS 绝对定位

话不多说，直接上代码

    
    
    



    
我要居中

使用了绝对定位之后，过头了

可以看到，并没有居中，有点过头了，因为还忽略了紫色模块的高度和宽度。
如果要紫色模块在粉色模块中垂直居中，紫色模块距离粉色模块的顶部的距离，应该是50%的粉色高度 - 50% 的紫色高度，水平居中的宽度同理。
所以这时候，可以用CSS3的位偏移，挪回去。

transform: translate(-50%, -50%);

完整代码：

    
    
    



    
我要居中

居中啦