之前設(shè)置div中的文本垂直居中的時(shí)候，習(xí)慣性的使用height和line-height等于相等的值的方式實(shí)現(xiàn)垂直居中效果忘古，但是沒有深刻理解過line-height這個(gè)屬性的具體含義，今天抽空查閱了相關(guān)文檔疾渴，也算是比較清晰了解了line-height這個(gè)屬性以及當(dāng)他與height值相等時(shí)使得文字能垂直居中的原理千贯，簡單記錄一下。
首先抄一下mdn上關(guān)于line-height 的相關(guān)介紹：line-height屬性用于設(shè)置多行元素的空間量搞坝，如多行文本的間距搔谴。對(duì)于塊級(jí)元素，它指定元素行盒（line boxes）的最小高度桩撮。對(duì)于非[替代]的 inline 元素敦第，它用于計(jì)算行盒（line box）的高度。這句話看起來很繞店量，我也沒理解透徹芜果，試驗(yàn)了幾番感覺line-height并沒有指定塊級(jí)元素的最小高度，而是在塊級(jí)元素沒有設(shè)置height的情況下融师，會(huì)取line-height設(shè)置的高度作為默認(rèn)高度右钾，行級(jí)元素的話就直接由line-height指定其高度。
還有行高比較通俗易懂的解釋是：行高是指文本行基線間的垂直距離旱爆。基線（base line）并不是漢字文字的下端沿舀射，而是英文字母“x”的下端沿。下面放一張盜來的圖具體解釋一下相關(guān)概念怀伦。
- 頂線：文字頂部對(duì)齊的線
- 中線：文字中部的畫線
- 基線：英文字母下端沿線
- 底線： 文字底部對(duì)齊的線
- 文字高度：即我們熟悉的font-size值脆烟，就是頂線到底線的距離
當(dāng)存在多行文本時(shí)，可以看到： - 行距：相鄰兩行之間房待，上行底線距下行頂線的距離
- 半行距：顧名思義邢羔，行距的一半，單獨(dú)提出來有重要作用
接下來講一下本文的重點(diǎn)：height吴攒、line-height與font-size之間的關(guān)系张抄。由圖可知，line-height的值等于中線到底線的距離 +行距 + 頂線到中線的距離洼怔，即 行距 + font-size署惯。然后觀察圖中多行文本的上面或者下面一行(推薦下面一行)當(dāng)做單行文本來看，一行的高度 = 半行距 + font-size +半行距镣隶，即 行距 + font-size极谊，即line-height值。當(dāng)line-height值變大時(shí)安岂，也就是圖中一行的高度變大轻猖，其中font-size的值是不會(huì)變化的，所以line-height值的變化影響的是行距或半行距值的變化域那。當(dāng)div的height等于line-height時(shí)咙边，就相當(dāng)于把圖中一行整體占滿div高度放入div中，此時(shí)文字自然垂直居中。設(shè)想此時(shí)增大line-height的值败许，div最高處與行頂部對(duì)齊王带，增大line-height的值導(dǎo)致半行距增大，即文字距離頂部的距離增大市殷，div的高度此時(shí)不變愕撰，文字就會(huì)偏離中心位置向下位移，反之減小div的值醋寝，文字就會(huì)向上偏移搞挣。
綜上所述：line-height = 半行距 + font-size + 半行距 ，如果font-size 不改變大小音羞，那么line-height的值同半行距將保持線性關(guān)系囱桨，直觀表現(xiàn)就是line-height的值的改變會(huì)改變文本頂線到border-top之間的距離。
