怎麼理解利用行高居中？

行高介紹

(W3C)定義和用法

line-height 屬性設置行間的距離（行高）。
註釋：不容許使用負值。

說明

該屬性會影響行框的佈局。在應用到一個塊級元素時，它定義了該元素中基線之間的最小距離而不是最大距離。
line-height 與 font-size 的計算值之差（在 CSS 中成爲「行間距」）分爲兩半，分別加到一個文本行內容的頂部和底部。能夠包含這些內容的最小框就是行框。
原始數字值指定了一個縮放因子，後代元素會繼承這個縮放因子而不是計算值。

圖示行高

由圖所示，添加文本內容會造成行高，就是包含文本內容和相等的文本內容頂部半行距、底部半行距的一個區域,這個區域是屬於盒子內容部分。能夠經過元素中基線之間距離來定義。

話很少說，經過了解行高的做用來了解行高吧！

行高的主要做用

使文本文字垂直居中

以下案例：

1.起始行高默認值，此時行高是默認值

.line_height {
      width: 200px;
      height: 200px;
      background-color: pink;
      border: solid 1px red;
      padding: 30px;
    }
    
  <div class="line_height">hello line-height</div>

運行結果：
(1)

(2)
結構圖 此圖爲盒子結構圖，藍色爲盒子內容區域，綠色爲內邊距，

由圖可知文本內容相對盒子高的中線偏上。

2.當行高等於盒子內容大小時，即不含padding值和border值。

.line_height{
      width: 200px;
      height: 200px;
      background-color: pink;
      border: solid 1px red;
      padding: 30px;
      line-height: 200px;
    }

運行結果：

由圖可知此時文本內容處於盒子內容的垂直居中，位於盒子高的中線上,實現了文本居中效果。

3.當行高大於盒子內容大小時。

.line_height{
      width: 200px;
      height: 200px;
      background-color: pink;
      border: solid 1px red;
      padding: 30px;
      line-height: 250px;
    }

運行結果：

此時文本內容相對盒子高的中線偏下

4.當行高小於盒子內容大小時

.line_height{
      width: 200px;
      height: 200px;
      background-color: pink;
      border: solid 1px red;
      padding: 30px;
      line-height: 100px;
    }

運行結果：

此時文本內容相對於盒子高的中線之上。