问题是出在 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://webptt.com/cn.aspx?n=bbs/Web_Design/M.1408886904.A.F57.html ※ 编辑: yshlptt (36.231.26.50), 08/24/2014 22:10:38