html字体垂直高度设置,CSS： 父元素高度确定的单行文本垂直居中使用height+line-height...

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

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

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

本文只介绍高度确定的单行文本垂直居中问题！

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

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

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

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

上方效果图的代码如下：

hi,imooc!

css代码：

.container{

height:100px; /*高度确定*/

line-height:100px; /*垂直居中*/

background:#999;

}

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