编辑：只是想澄清这些跨度有不明高度(因为响应)！
我试图在< div class =“row”>内的两个< div class =“span6”>在Bootstrap中,我使用任何我通常的技巧有问题,如display：inline-block;或显示：table-cell; (这是我正在工作的JSFiddle：http://jsfiddle.net/mA6Za/).
这是我试图使用的,这在Bootstrap中不起作用：
@H_403_6@<div class="container"> <div class="row" style="display: table"> <div class="span6" style="height: 300px; background: red; display: table-cell !important; vertical-align: middle;"> Block 1 - Vertically center me please! </div> <div class="span6" style="height: 170px; background: blue; display: table-cell !important; vertical-align: middle;"> Block 2- Center me too </div> </div> </diV>可以垂直对齐这两个.span6,以使Block1和Block2的高度都不知道？我想使用Bootstrap,因为负责任的功能,但平板电脑我们希望内容垂直对齐.
解决方法
如果您想要将div的内容垂直居中或实际的div自身,我不认为你很清楚.无论如何,这两个选项都有解决方案：
垂直居中的实际div
它的工作原理是设置display：table; on .container和display：table-cell;在.row.一旦完成,你可以设置vertical-align：middle;在.row上垂直居中的内容.
我也不得不手动强制.row的宽度为960px,这不是很敏感(你可以使用media queries修复),但是在设置之后Bootstrap设置的.px的边距左边不起作用显示：table-cell;在.row.不强制添加这些额外的20px将导致第二个div结束在第一个div以下,因为它们不会同时在同一行上合并.我设置了一些高度：100％;在所有元素上进行演示.
CSS
@H_403_6@.container { margin-top: 10px; display: table; height: 100%; } .row { min-width: 960px; display: table-cell; height: 100%; vertical-align:middle; }垂直居中的div的内容
如果要垂直居中的div的内容,可以通过设置display：table来做到这一点.在.row和设置显示：table-cell; on .span6.你也需要摆脱float：left;通过将其设置为float：无.span6.
这是一个演示此选项的小提琴：jsFiddle
