div中讓文字垂直居中

在div中如何讓文字垂直居中？

作者在剛接觸web前端開發時就遇到了這個問題，一直沒有記錄下來，今天正好有空，便記錄下來。

為了方便展示，我把style先直接寫在了div里。

效果如下圖所示：

 

圖1.修改前效果圖

 

可以看到，“寺院巡禮”的標題並沒有達到垂直居中的效果。

簡單的解決方法就是讓div的 和 兩個屬性的值相等。

由之前的代碼可知此div的高為60px，因此，在原style中添加 樣式，即可。

添加代碼，修改后的效果如下圖所示：

 

圖2.修改后效果圖