1.單行文字是透過設定父元素的 height 和 line-height 高度一致來完成的，其中height是指元素的高度, line-height 是指行間距。

案例：

寫一個<div>我是單行文字，我想垂直居中</div>

效果如圖：

2.在<style>中加入CSS樣式

<style type="text/css">

div{

height: 200px;

line-height:200px;

background: #3fc;

}

</style>

結果如圖:

3.父元素的高度確定，table標籤包裹然後設定vertical-align：middle

案例：

寫三個<p> 我是多行文字1，我想垂直居中</p>

<p> 我是多行文字2，我想垂直居中</p>

<p> 我是多行文字3，我想垂直居中</p>

效果如圖：

4.table（因為td 標籤預設情況下就預設設定了 vertical-align 為 middle。所以不用重新再寫 vertical-align:middle）標籤包裹程式碼設定和效果圖如下：