問題是出在 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
: --> "肉眼上"看起來應該是置中了
: http://jsfiddle.net/ujpv58e9/6/
: 1.
: 我可以手動加減周遭幾個元素的margin / padding 等東西讓他"看起來"置中
: 這樣做是正確的嗎? 感覺好像比較像是"變通"
: 2.
: 每個元素的高度計算是 marging + border + padding + content
: 但為什麼在50px這種高度的情況下
: 我得將content以外的東西扒掉
: vertical-align: middle; 的效果才會出現?
: 3.
: 我發現我用的px ruler (JRuler) 有個缺點:
: 靠近螢幕下緣，太短小東西會讀不出測量值 (讀數被推出螢幕外)
: 如圖 http://imgur.com/Hg2pLMT
: 請問大家有推薦的工具可以量測元素和元素之間的距離嗎?
: 還是只能用js算?
: ==
: 之前也試玩了bootstrap input-group
: Ex: 一個search bar旁邊黏一個 glyphicon glyphicon-search
: 想將search bar的高度調高一點
: 而旁邊的search icon 就靠著inspect element量一量大小
: 手工調整margin / padding / height，讓兩者看起來同樣大小
: 這樣做.... 對嗎? 可靠嗎?
: 謝謝
: ※ 引述《eight0 ( )》之銘言：
: : 這個真炫，我也是第一次看到。以前也有種常見的做法是把 parent 設成
: : relative，child 設 absolute，加上 top 與 margin-top 調位置。
: : http://jsbin.com/notifucigedo/7/edit?html,css,output
: : 缺點是要知道 child 的高度。
: : 這個方法好像是之前在板上看到的，用空的行區塊原素設 height: 100% 來填滿高度。
: : http://jsbin.com/peqilugomemi/1/edit?html,css,output
: : 缺點就是要處理空白符，網路上也滿多討論
: : http://css-tricks.com/fighting-the-space-between-inline-block-elements/
: : 個人覺得目前最好的做法還是 display: table-cell，和 Bootstrap 的
: : Grid system 也能很好的配合。
--
※ 發信站: 批踢踢實業坊(ptt.cc), 來自: 36.231.26.50
※ 文章網址: http://www.ptt.cc/bbs/Web_Design/M.1408886904.A.F57.html
※ 編輯: yshlptt (36.231.26.50), 08/24/2014 22:10:38