各種居中問題，比如左右居中，垂直居中等，都是前端中比較常用，且容易混淆的問題，所以學習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設置為一樣，就是垂直高度居中了！