項目中經常遇到的問題，在此寫出處理多行文本垂直居中的兩種方法。先把代碼寫上吧，直接看很清楚。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>讓多行文本在容器中垂直水平居中</title> <style> /***第一種方法 普通設置行高方法***/ .box{ width:400px; height:300px; line-height:300px;/*父級容器記得設置行高*/ background:rgb(164, 214, 179); } .box-son{ display:inline-block;/*文字容器要轉成行內塊元素*/ width:100%; height:auto; line-height:30px; vertical-align: middle;/*設置元素垂直對齊方式為中部*/ background:#eee; } /***第一種方法 使用flex布局方法***/ .boxt{ display:flex; align-items: center;/*垂直軸居中*/ justify-content:center;/*使容器內元素水平軸居中，此處旨在說明屬性作用*/ width:500px; height:300px; background:rgb(57, 175, 211); margin-top:20px; } .boxt-son{ flex:0.6;/*設置元素占父元素長度的比例*/ display:flex; line-height:30px; background:#eee; text-align:center; } </style> </head> <body> <!-- 方法一 --> <div class="box"> <span class="box-son"> 遇上你是我今生最大的幸福，你可以不相信我說的話，但一定是真的。 </span> </div> <!-- 方法二 --> <div class="boxt"> <span class="boxt-son"> 遇上你是我今生最大的幸福，你可以不相信我說的話，但一定是真的。 </span> </div> </body> </html>
代碼中用到兩種方式去處理，方法一：使用設置行高的方式。方法二：使用flex布局及css屬性去處理，此方法不兼容ie10以下ie慎用，具體查閱flex布局特點。