大家都用過line-height，可以實現垂直文字居中：

//html
<p>
  這是文字
</p>
//css
p{
  height: 40px;
  line-height: 40px;
  border: 1px solid red;
  font-size: 20px;
}

當然還可加入text-align：center讓它水平居中

一、line-height定義

引入一張網路圖：

[來源][https://www.jianshu.com/p/6e4d683f6cf2]

簡單來說就line-height = 上間距+文字高+下間距

二、為什麼會居中

因為

上間距+文字高+下間距= line-height = 邊框高

上間距 = 下間距（我猜瀏覽器計算時候應該是 （line-height - 文字高）/ 2 計算上下間距的）

也可以把line-height看成一個盒子（只是一個比喻，跟盒子模型沒關係）的高，就是整個盒子佔據了所有的高，文字在那個盒子中是居中的，所以在那個盒子也是居中的。

三、拓展

試著想下，當line-height＜font-size的時候會發生什麼

//html
<p>
  這是文字
</p>
//css
p{
  height: 40px;
  line-height: 10px;
  border: 1px solid red;
  font-size: 20px;
}

 

間距 = （line-height - 文字高）/ 2 = （10 - 20）/ 2 = -5 px

上下邊距都是 -5px。

結果：