簡言

這個方式應該是最多人知道的了，其實這符合資料垂直置中而非垂直對齊，常見於單行文字的應用，像是按鈕這一類物件，或者是選單、導覽列此類物件最常見到此方式了。此方式的原理是在於將單行文字的行高 line-height 設定後，文字會位於行高的垂直中間位置，利用此原理就能輕鬆達成垂直置中的需求了。

Line-height 原理

基本上Line-height 的原理跟特性就是設定行的高度，可以說是一行字所要佔據的高度空間是多少，他會把整個空間分配到文字的上方與下方，也因為這樣的特性，讓我們可以利用他來達到單行文字垂直置中的目的，等同於利用 Line-height 來取代 height 屬性，但多行文字呢? 剛剛說過，因為它是單行文字的高度，所以基本上如果是多行的話，會導致單行過高就無法達成垂直置中了。但並非完全無法達成，下一篇文章就讓我們來了解使用Line-height做多行垂直置中的技巧吧

原始碼

HTML

<div class="content">Lorem ipsam.</div>

CSS

.content{
  width: 400px;
  background: #ccc;
  line-height:100px;
  margin: auto;
}

Line搜尋「@csscoke」加入CSS可樂公開帳號，可以收到 Amos 第一手資訊喔
本文同步發表於 CSS可樂部落格
CSS coke的直播頻道
歡迎點擊右側訂閱 CSS coke直播頻道
若有任何問題歡迎留言討論喔
謝謝各位