最近寫專案的時候遇到個問題，資料從後台傳送過來，可能是1行文字或者2行文字，要求居中顯示。如果按照height=line-height的方式來做，當文字是2行的時候就會使得2行文字的間距非常大。
1.首先給需要居中的元素外面再包一層div作為父元素。
2.然後設定父元素的height=line-height，按照最大可能2行的高度來設定。
3.對目標子元素設定display:inline-block屬性，使其轉化成行內塊元素，模擬成單行文字。
4.對目標子元素單獨設定合適的行高line-height屬性
5.對目標子元素設定vertical-align:middle屬性，使其基線對齊。
檢視效果，無論是單行文字還是多行文字，都成功居中了！
第三布的display:inline-block，也可以換成display:inline-box
多行文字垂直居中
單行文字垂直居中比較簡單，只需將 line height 屬性值與其父元素的 height 屬性值設為相等即可。如下所示 class text 這是第一段文字span class text 這是第二段文字span class text 這是第三段文字span class text 這是第四段文字sp...
CSS多行文字垂直居中
今天需要將文字垂直居中，就是一行是垂直居中，多行也是垂直居中。效果如下 實現 同事提供 doctype html html head lang en meta charset utf 8 title title style listdiv listdivleft listdivleft span l...
CSS多行文字垂直居中
今天需要將文字垂直居中，就是一行是垂直居中，多行也是垂直居中。效果如下 實現 同事提供 doctype html html head lang en meta charset utf 8 title title style listdiv listdivleft listdivleft span l...