利用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的 弹性和模型,这个坑留着,下次再来挖。
相关链接:从一个居中方法说起