15-6垂直居中-父元素高度確定的單行文本 · 初識HTML+CSS

我們在實際工作中也會遇到需要設置垂直居中的場景，比如好多報紙的文章標題在左右一側時，常常會設置為垂直居中，為了用戶體驗性好。這里我們又得分兩種情況：父元素高度確定的單行文本，以及父元素高度確定的多行文本。本節我們先來看第一種父元素高度確定的單行文本, 怎么設置它為垂直居中呢？ **父元素高度確定的單行文本**的豎直居中的方法是通過設置父元素的?height?和[?line-height?](http://www.imooc.com/code/2083 "忘了的小伙伴，讓我們點擊鏈接復習一下吧!")高度一致來實現的。(height: 該元素的高度，line-height: 顧名思義，行高（行間距），指在文本中，行與行之間的?基線間的距離?)。 line-height 與 font-size 的計算值之差，在 CSS 中成為“行間距”。分為兩半，分別加到一個文本行內容的頂部和底部。這種文字行高與塊高一致帶來了一個弊端：當文字內容的長度大于塊的寬時，就有內容脫離了塊。如下代碼： ~~~ <div class="container"> hi,imooc! </div> ~~~ css代碼： ~~~ <style> .container{ height:100px; line-height:100px; background:#999; } </style> ~~~ ### 任務我來試試：補充右側代碼使 h2 中的文本垂直方向居中。（記得點擊右上角的全屏按鈕查看效果哦！） ``` <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>垂直居中</title> <style> .wrap h2{ margin:0; height:100px; line-height:100px; background:#ccc; } </style> </head> <body>  <div class="wrap"> <h2>hi,imooc!</h2> </div> </body> </html> ```