對於一行文字，我們經常有垂直居中的要求。比如我們製作一個按鈕時，其上的文字。
這時候，利用CSS的方法，將line-height設置爲對象的height時，此對象中的文字則會垂直居中。
本來這個方法不會有太多問題，但是當我們給這個對象設置border時，問題就來了。我在做按鈕時，給我的按鈕設置了border: 2px solid #ddd;由於按鈕不算太大，我使用此方法，並沒有發現有什麼不妥。但是，給UI看時，她說我沒有垂直居中。後來仔細測量，果然有微小的不同。
從未懷疑這個方法有什麼不妥。可是當你嘗試將border設置爲一個很粗的值時，就會發現此方法的問題了。
從上圖，就可以明顯看出border的影響。這時候解決的方法就是將border的設置放置在此對象的外層。