web前端技巧-⽂本如何垂直居中？多⾏⽂本如何实现上下居中？
做前端开发的同学肯定对⽂本居中不陌⽣，但⼀般我们说的都是⽔平居中也就是左右居中，那么你想过没有如何实现垂直居中也就是上下居中吗？今天⼩千就来给⼤家介绍⼀下。
单⾏⽂字垂直居中—⾏⾼等于⾼度值
上⾯的⽅法只适⽤于单⾏⽂本，多⾏⽂本使⽤就会出现问题，那么如何实现多⾏⽂本垂直居中呢？
多⾏⽂本垂直居中
1、模拟表格
将⽗元素div 模拟成表格table,⼦元素span模拟成表格单元格；让⼦元素设置vertical-align:middle来实现。
2、模拟表格单元格
3、将⼦元素设置为⾏内块元素，模拟成单⾏⽂字
将⼦元素设置为⾏内块元素，并且设置vertical-align:middle来实现，需要注意的是，⼦元素span会继承⽗元素div的⾏⾼，所以我们需要重设⼀个适宜的⾏⾼。
缺点：span⽂本的⾼度不能超过⽗元素div的⾼度。
4、利⽤定位的⽅式来解决
⽗元素设置相对定位，⼦元素设置绝对定位，并且设置top：50%；margin-top：负⼦元素⾼度的⼀半；如果不考虑兼容问题，我们也可以利⽤CSS3中 transform:translateY(-50%)来代替margin-top：负⼦元素⾼度的⼀半。
5、使⽤flex布局
我们可以使⽤弹性盒布局来实现这个效果。
div中的div居中以上就是web前端实现⽂本垂直居中和多⾏⽂本垂直居中的介绍了。最后欢迎⼤家关注我，后期分享更多Web前端知识。
本⽂来⾃，转载请注明出处。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。