問題是出在 bootstrap 的 navbar-text 類別，
在 div 上下各加上了 15px 的 margin，
把 margin-top 設定為 0 即可。
至於為何 margin 會把置中弄亂...這個留給三樓來回答（誤）
簡單來說因為 div 高度設為 100%，
例如外層是 100px，div 的高度就會是 100px，
而 margin 會在上面多墊出 15px。
這樣一來你要置中的東西永遠會往下偏 15px，
設定高度為 300px 並沒有真正讓它置中，
只是因為高度比例的關係看起來不明顯罷了。
另外一個小建議，如果想要紮實的學習各種 CSS 屬性的用法，
建議不要太早開始使用 bootstrap，
裡面雖然幫你包好很多 class 很方便，
但很多 CSS 屬性彼此間會互相交錯影響，
沒搞清楚就亂用只會讓你的 code 愈來愈亂難以除錯，
學起來可能會較辛苦挫折。
當然如果比較沒有時間上的壓力，
bootstrap 可以讓你多看到一些不同 CSS 屬性的用法，
但如果是手邊有案子在 run 的話，
建議先試著自己從頭撰寫 CSS，
一方面較不容易因為錯綜複雜的問題卡關卡太久，
一方面也是讓自己逐步熟悉各種 CSS 屬性，
有時候慢慢來比較快，想要一步登天可能會有反效果。
※ 引述《sean72 (.)》之銘言：
: 謝謝大家的指點
: 下面是最新試玩的結果
: /*override bootstrap value*/
: .navbar-text.pull-right { height: 100%; }
: 將navbar裡面每層元素都調整成 height:100%
: 並配合 display:table / display: table-cell
: 故意設定一個很高的footer EX: .navbar-fixed-bottom {height: 300px}
: 我終於達到垂直置中
: http://jsfiddle.net/ujpv58e9/2/
: 但是
: 當我將navbar-fixed-bottom調整成較正常高度 EX: 50px
: 我的icon又不置中了
: http://jsfiddle.net/ujpv58e9/7/
: inspect element之後
: 暴力的將所有margin / top / padding top bottom的份調整為0px
: