问题是出在 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
: