CSS DIV 區塊內的文字垂直置中

CSS DIV 區塊內的文字垂直置中會採用到幾個重點，首先是要設定好 DIV 區塊的高度，接著是重頭戲，CSS 的 line-height 屬性，這個屬性是 CSS 標準的文字行高設計，因為可以用來設計每一行文字的高度，所以我們利用 line-height 的特性，套入到 DIV 區塊之中，就能輕易的創造出 DIV 區塊內文字垂直置中的效果囉！而且幾乎瀏覽器都支援這樣的技巧，line-height 也算是 CSS 基本功能。

DIV 區塊內的文字垂直置中範例

<div style="width:500px;height:100px;line-height:100px;text-align:center;border:2px #00F0F0 solid;">
DIV 區塊內的文字垂直置中範例
</div>

呈現效果

DIV 區塊內的文字垂直置中範例

範例程式中有幾個重點，首先是 DIV 區塊的寬度是 500px（語法 width:500px;）、高度是 100px（語法 height:100px;），這兩個部分讓 DIV 區塊的尺寸出來了，接著重點「line-height:100px;」就是讓文字垂直置中的關鍵，行高設為 100px，與 DIV 區塊本身的高度相同，等於讓文字自然而然的垂直置中，後面還有兩個語法，分別是讓文字水平置中的 text-align 與 DIV 區塊的邊框 border 設計，這幾個都是 CSS 設計相當基本且常用到的語法，有興趣的朋友可以研究這幾篇的介紹。

更多 DIV 區塊設計技巧