使用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{*/ /* 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的值决定的。