css使文字垂直對齊的方法：1、設定行文字的實際高度height和所在行的高度line-height相等；2、透過設定上下的padding值相同使多行未知高度文字垂直居中；3、使用vertical-align使多行文字固定高度的居中即可。
本教學操作環境：Windows7系統、HTML5&&CSS3版本，此方法適用於所有品牌電腦。
推薦：《css視訊教學》
一、單行文字垂直居中對齊
如果一個容器中只有一行文字，對它實作居中相對比較簡單，我們只需要設定它的實際高度height和所在行的高度line-height相等即可。
範例：
单行文字实现垂直居中 现在我们要使这段文字垂直居中显示！
效果圖：
#不過在Internet Explorer 6及以下版本中，這和方法不支援對圖片設定垂直居中。
二、多行未知高度文字的垂直居中
如果一段內容，它的高度是可變的那麼我們就可以使用上一節講到的實現水平居中時使用到的最後一種方法，就是設定Padding，讓上下的padding值相同即可。同樣的，這也是一種「看起來」的垂直居中方式，它只不過是使文字把
div { padding:25px; }
範例：
多行文字实现垂直居中 现在我们要使这段文字垂直居中显示！ div { padding:25px; border:1px solid #FF0099; }登入後複製
效果圖：
三、多行文字固定高度的居中
CSS中的vertical-align屬性只會對擁有valign特性的(X)HTML標籤起作用，但是在CSS中還有一個display屬性能夠模擬
注意，display:table和display:table-cell的使用方法，前者必須設定在父元素上，後者必須設定在子元素上，因此我們要為需要定位的文字再增加一個< ;div>元素：
div#wrap { height:400px; display:table; } div#content { vertical-align:middle; display:table-cell; border:1px solid #FF0099; width:760px; }
範例：
多行文字实现垂直居中 现在我们要使这段文字垂直居中显示！现在我们要使这段文字垂直居中显示！现在我们要使这段文字垂直居中显示！现在我们要使这段文字垂直居中显示！
效果圖：
以上是css如何使文字垂直對齊的詳細內容。更多資訊請關注PHP中文網其他相關文章！
