CSS：父元素高度确定的单行文本垂直居中使用height+line-height_CSS学习

当前位置：网站建设 > 技术支持

资料来源：网络整理时间：2023/3/4 0:56:29 共计：3601 浏览

各种居中问题，比如左右居中，垂直居中等，都是前端中比较常用，且容易混淆的问题，所以学习CSS时，必须把各种居中拿下，比如今天要介绍的单行文字居中问题！

如上图：就是hi,imooc!进行了父元素（灰色背景）内进行了垂直居中，且是单行文字的垂直居中，常用于文章标题居中，本人在制作各种zblog主题的时候必用！

其实垂直居中也分为：父元素高度确定的单行文本、父元素高度确定的多行文本。

本节我们先来看第一种父元素高度确定的单行文本, 怎么设置它为垂直居中呢？

父元素高度确定的单行文本的竖直居中的方法是通过设置父元素的 height 和 line-height 高度一致来实现的。(height: 该元素的高度，line-height: 顾名思义，行高（行间距），指在文本中，行与行之间的基线间的距离 )。

line-height 与 font-size 的计算值之差，在 CSS 中成为“行间距”。分为两半，分别加到一个文本行内容的顶部和底部。

这种文字行高与块高一致带来了一个弊端：当文字内容的长度大于块的宽时，就有内容脱离了块。

上方效果图的代码如下：

<div>hi,imooc!</div>

css代码：

<style>
    .container{
        height:100px; /*高度确定*/
        line-height:100px; /*垂直居中*/
        background:#999;
    } 
</style>

把height与line-height设置为一样，就是垂直高度居中了！

版权说明：
本网站凡注明“广州京杭原创”的皆为本站原创文章，如需转载请注明出处！
本网转载皆注明出处，遵循行业规范，如发现作品内容版权或其它问题的，请与我们联系处理！
欢迎扫描右侧微信二维码与我们联系。

CSS： 父元素高度确定的单行文本垂直居中使用height+line-height_CSS学习