CSS 文字垂直置中技巧

會寫這一篇是因為在 CSS 中要水平置中相當簡單，只要使用 text-align 即可，但是垂直置中就不是這麼容易的事情，其實說難也不難，只要用一點小技巧就可以做出文字垂直置中的效果，本篇用的是 line-height 行高的技巧。

CSS 文字垂直置中範例

<DIV style="background-color:#C7FF91;width:300px;height:100px;text-align:center;line-height:100px;">
　測試文字垂直置中
</DIV>

呈現結果

測試文字垂直置中

由此範例可以看到文字已經在區塊垂直方向置中了，甚至連水平都置中了。

稍為解說一下這段語法，手先是 DIV 區塊將文字包在裡面，style 的部分，我們設定了背景顏色（background-color:#C7FF91）、寬度（width:300px）、高度（height:100px）、水平置中對齊（text-align:center）以及最重要的 line-height100px。

由於 DIV 區塊的高度設定為 100px，這時候設定文字的 line-height（行高）也是 100px，就自然而然的垂直置中囉！

延伸閱讀