利用translate来垂直居中

最近在做移动端的页面，其间遇到一个问题，让文本垂直居中，之后发现一个暂时比较好，基本人畜无害的方法，在这记录一下，也给有需要的朋友的做一个分享。

先来看一下传统的解决方法：

#test{
        height: 50px;
        font-size: 2rem;
        line-height: 50px;
        text-align: center;
        border: 1px solid red;
 }
<div id="test">
        <span>this is test</span>
</div>

效果可以看：传统居中方式

其中的关键是：父级的div高度已知，然后设置line-height和height相等

但是在移动端开发的过程中，往往需要适配小屏幕，这就导致div的高度得根据设计稿的比例来用百分比代替，并不能写成固定值。这就会导致上面的demo会失效，不信的同学可以点开上面的链接，将高度改为百分比试试。

现在我们就要用到人畜无害的css3方式了：

 

#test{
    background-color: gray;
    height: 40%;
    font-size: 2rem;
    position: relative;
}
span{
    position: absolute;
    top:50%;
    left: 50%;
    -webkit-transform: translate(-50%,-50%);
}　

效果：translate居中

 实现的关键：父级div设置定位为relative或者absolute，要定位的元素做如上的设置，即可保证垂直居中。

 

但是，一开始说的基本上人畜无害时什么依意思捏？

注意：如果你使用了css3的动画，并且在动画中同样使用了translate来操作，那么这样的写法就会有问题，动画执行完会导致位置出现偏移。

当然，网上还有其他的垂直居中解决方案，比如利用css3的 弹性和模型，这个坑留着，下次再来挖。

相关链接：从一个居中方法说起