垂直居中分兩種情況：1.父元素高度確定的單行文本 2.以及父元素高度確定的多行文本。

　　1.垂直居中-父元素高度確定的單行文本的豎直居中的方法是通過設置父元素的 height 和 line-height 高度一致來實現的，即此時單行文本的行高line-height=height(父元素塊高度)。(height: 該元素的高度，line-height: 顧名思義，行高（行間距），指在文本中，行與行之間的 基線間的距離 )。

line-height 與 font-size 的計算值之差，在 CSS 中成為“行間距”。分為兩半，分別加到一個文本行內容的頂部和底部。

但是有一個弊端

#sy{
    margin-top:20px;
    text-align:center;
    height:50px;
    line-height:50px;
    width:200px;
    font-size:20px;
    background:#F30;}


<div id="sy">你看我是不是超出了父塊元素？</div>

所以這種方法用於網頁的頁眉或者頁腳還是很不錯的

　　2.垂直居中-父元素高度確定的多行文本

　　　　方法一：使用插入 table (包括tbody、tr、td)標簽，同時設置 vertical-align：middle。

　　　　　　　　css 中有一個用於豎直居中的屬性 vertical-align，在父元素設置此樣式時，會對inline-block類型的子元素都有用。

　　　　　　　　（td 標簽默認情況下就默認設置了 vertical-align 為 middle，所以我們不需要顯式地設置了。）

.jz{
       height:200px;
　　　　background:yellow;
    }

<table><tbody><tr><td class="jz">
<div>
    <p>看我是否可以居中。</p>
    <p>看我是否可以居中。</p>
    <p>看我是否可以居中。</p>
    <p>看我是否可以居中。</p>
    <p>看我是否可以居中。</p>
</div>
</td></tr></tbody></table>

垂直居中小記 line-height table vertical-align：middle