透過 CSS 實現 <div> 標籤中的文字垂直居中

既然是要垂直居中，那麼就必需指定文字所在 HTML 標籤的寬度和高度。例如：

div { width:106px; height:40px }

文字是直接裝在 <div> 標籤中，HTML 原始碼如下：

<div>參觀人氣</div>

文字預設顯示在左上角：

參觀人氣

偶們首先容易想到的是水平居中 text-align:center：

參觀人氣

然後垂直居中需要設定給文字用的 line-height 與 <div> 的 height 高度相同。line-height:40px：

參觀人氣

最後的 CSS 就是這樣：先是寬度、高度，然後水平居中、垂直居中。

div {
 width:106px; height:40px;
 text-align:center; line-height:40px;
}