本文介绍了CSS中实现垂直居中的多种方法，包括padding、line-height、display:flex、position与transform等，并解答了使用line-height时为何不能设置为100%等问题。同时探讨了在垂直居中基础上如何使元素水平居中，如使用text-align、margin:0 auto及flex布局等。还解答了关于margin、transform和position居中技巧的常见疑问。
1.背景介绍：
在前端开发过程中，对页面进行布局时，除了CSS水平居中的需求外，还会经常遇到CSS垂直居中的需求，CSS垂直居中跟CSS水平居中一样都是前端工程师的基本功。
2.知识总结：
几种常用到的垂直居中方法：
1、头部和顶部使用相同大小的padding值可以实现居中。
2、单行文本可以用line-height实现垂直居中，设置子元素的line-height值等于父元素的height，这种方法适用于子元素为单行文本的情况。
3、通过display:flex，align-items: center;或 align-self: center;实现垂直居中。
4、使用position、transform实现元素垂直居中。
5、使用position结合margin：auto实现垂直居中。
6、使用 display :table和 vertical-align 对容器里的文字进行垂直居中, 父元素使用display:table,子元素使用display:table-cell属性来模拟表格，子元素设vertical-align:middle即可垂直居中。
7、通过verticle-align:middle实现行内垂直居中。
3.常见问题：
1、使用line-height设置垂直居中时，为什么设置line
最低0.47元/天 解锁文章
扫一扫
313
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
