使用css屬性line-height實現文字垂直居中的問題
1、使用css屬性line-height實現文字垂直居中
方法比較簡單，但是只能實現單行文字的垂直居中。
單行垂直居中效果如下：
要是p標簽內的文字是多行呢，要實現多行垂直居中，還這樣設置的話就會出現下一行文字跑出div盒子。每行文字行高跟div盒子高度一樣，當文字是多行時，第二行及后面行不跑到盒子外面才怪！
現象如下：
代碼如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>css中line-height的應用</title> <style> *{ margin: 0px; padding: 0px; } div{ width: 200px; height: 200px; background-color: aquamarine; } p{ text-align: center;/*水平居中*/ line-height: 200px;/*垂直居中*/ } </style> </head> <body> <div> <p>垂直居中的問題</p> </div> </body> </html>
2、怎樣實現多行文字垂直居中呢？
（1）、使用定位將一個盒子固定在div塊中間，將p標簽放在盒子中就可實現多行垂直居中。
效果如下：
代碼如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>css中line-height的應用</title> <style> *{ margin: 0px; padding: 0px; } div{ width: 200px; height: 200px; background-color: aquamarine; position: relative; } .div1{ text-align: center;/*水平居中 */ /*line-height: 200px;!*垂直居中 *!*/ width: 140px; height: 90px; /*font-size: 20px;*/ background-color: #cad5eb; position: absolute; left: 0px; right: 0px; top: 0px; bottom: 0px; margin: auto; } </style> </head> <body> <div> <div class="div1"> <p>垂直居中的問題垂直居中的問題垂直居中的問題垂直居中的問題垂直居中的問題</p> </div> </div> </body> </html>
（2）、借助line-height和vertical-align實現多行文字垂直居中。水平的移動咱借助padding-left來實現。
效果如下：
代碼如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>line-height單行文本垂直居中2</title> <style> *{ margin: 0px; padding: 0px; } /*div{*/ /*width: 200px;*/ /*height: 200px;*/ /**/ /*}*/ p{ line-height:150px; border:1px dashed #cccccc; padding-left:200px; } p>span{ display:inline-block; line-height:1.4em; vertical-align:middle; font-size:18px; } </style> </head> <body> <!--<div>--> <p> <span> 這是文字的垂直居中，這是文字的垂直居中，文字大小設置為18px <br /> 這里是第二行，用來測試多行的顯示效果。 </span> </p> <!--</div>--> </body> </html>
（3）、就是把文字當圖片處理。用一個span標簽把所有的文字包進來，設置文字與圖片相同的display屬性（inline-block屬性），然后用處理圖片垂直居中的方式處理文字的垂直居中即可。
效果如下：
代碼如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>line-height單行文本垂直居中3</title> <style> *{ margin: 0px; padding: 0px; } div{ width:550px; height:200px; padding-left: 80px; border:4px solid #beceeb; color:#069; display:table-cell; /*font-size: 18px;*/ vertical-align:middle; } span{ display:inline-block; font-size: 18px; /*vertical-align:middle;*/ text-align: center;/*文字水平居中*/ } </style> </head> <body> <div> <span> 像處理圖片垂直居中的方式來處理文字的垂直居中即可。 <br> 這是第二行，用作測試！ </span> </div> </body> </html>
3、插一個題外話：一個空的div盒子，<div></div>里面什么都不放，他的高度值為0,；但是在里面放入文字后，div盒子立馬就有了高度，怎么就有了高度呢？
你也許會說，div盒子的高度是被文字撐大的。這么說也沒啥問題；但是呢，不夠嚴謹。應該說div盒子的高度是被里面文字默認的行高或設置的行高給撐起來的。下面來驗證一下。
看實例效果：
代碼如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>line-height撐起div盒子的高度</title> <style> *{ margin: 0px; padding: 0px; } .test1{ font-size:20px; line-height:0; border:1px solid #cccccc; } .test2{ font-size:0; line-height:20px; border:1px solid #cccccc; background-color: aquamarine; } </style> </head> <body> <br/><br/><br/><br/><br/> <div class="test1">測試</div> <br/><br/><br/><br/><br/> <div class="test2">測試</div> </body> </html>
可以發現，第一個div的行高設為0，字體尺寸設為20px，結果這個div盒子的高度就只是邊框線的高度2px。而第二個div的字體尺寸設為0，行高設為20px,結果發現div盒子的高度變為了行高設置的高度。由此，一個內容為字體的div盒子的高度是由line-height的值決定的。