[CSS] 如何讓div element內的單行文字垂直置中(vertical center)

說明：
網頁上常用div element顯示區塊文字，水平置中可直接指定text-align:center，例：
<div style="text-align:center">test</div>
但文字垂直置中並沒有屬性可直接設定，
雖然有個vertical-align的屬性，不過是用在圖片置中上的...
那文字垂直置中該怎麼做?


作法：
答案是height跟line-height設一樣即可，例：
<div style="height:2vh;line-height:2vh">test</div>

不過為何這樣設定就可以讓文字垂直置中??
一般而言，line-height會大於font-size，
Content Area的高度由font-size決定，
 line-height扣掉font-size後的高度，會平均分配在Content Area的上面跟下面(half-leading)，
最後，line-height等於height，也就代表整個box的高度一致了。

參考資料：
https://stackoverflow.com/questions/8865458/how-do-i-vertically-center-text-with-css
https://stackoverflow.com/questions/8799164/how-does-line-height-vertically-center-text
https://www.slideshare.net/maxdesign/line-height