编辑：只是想澄清这些跨度的高度未知（因为响应性）！
我正在尝试在引导程序中<div class="span6">内垂直对齐两个<div class="row">，并且我在使用任何常用技巧时遇到问题，例如display: inline-block;或{{ 1}}（这是我正在研究的JSFiddle：http://jsfiddle.net/mA6Za/）。
这是我试图使用的内容，它在Bootstrap中不起作用：
display: table-cell;是否可以垂直对齐这两个<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的高度都未知？由于负责任的功能，我想使用Bootstrap，但对于平板电脑+我们希望内容垂直对齐。
答案 0 :(得分：20)
如果您希望div 的内容垂直居中或实际div，我认为您并未明确表达。他们自己。无论如何，两种方案都有解决方案：
div的首先是一个垂直对齐div的解决方案： jsFiddle
通过display: table;上的.container和display: table-cell;上的.row设置。完成后，您可以在vertical-align: middle;上设置.row以垂直居中其内容。
我还必须手动强制.row的宽度为960px，这不是很敏感（您可以使用media queries修复此问题），但是{{1}在margin-left上设置-20px后，.row上的display: table-cell;设置的.row不起作用。不强行添加这些额外的20px会导致第二个div结束于第一个以下，因为它们不会再在同一行上组合在一起。为了演示目的，我在所有元素上设置了一些height: 100%;。
<强> CSS
.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并在{{1}上设置display: table-cell;。 }。您还需要通过将.span6设置为float: left;来摆脱.span6。
这是展示此选项的小提琴： jsFiddle
答案 1 :(得分：1)
由于您使用的是固定高度且只有一行，因此您可以轻松使用line-height。
.span6:first-child{
line-height:300px;
}
.span6{
line-height:170px;
}
请参阅小提琴：http://jsfiddle.net/mA6Za/1/
答案 2 :(得分：1)
尝试执行此操作http://jsfiddle.net/mA6Za/2/
<div class="container">
<div class="row" style="display: table">
<div class="span6" style="height: 300px; background: red; display: table-cell !important; position: absolute; top: 50%; margin-top: -150px; ">
Block 1 - Vertically center me please!
</div>
<div class="span6 offset6" style="height: 170px; background: blue; display: table-cell !important; vertical-align: middle; top: 50%; margin-top: -85px ; position: absolute " >Block 2- Center me too
</div>
</div>
</div>
答案 3 :(得分：1)
<强>更新
所以我错了，我的原始答案不起作用，这就是原因。 Bootstrap仍在向所有float: left元素应用<div class="span*">。
/* From Bootstrap; some differences based on media query */
[class*="span"]
{
float: left;
min-height: 1px;
margin-left: 30px;
}
您可以通过对原始答案中的.cell样式进行以下更改来覆盖这些规则：
.cell
{
display: table-cell;
float: none;
vertical-align: middle;
}
但是，您将失去小屏幕上元素的响应“堆叠”（我认为您不想要），而是保留“表格”外观。为了防止这种情况发生，您很可能必须使用自己的媒体查询来调整display: table; float: none;样式。
即便如此，Bootstrap的目的不是将内容显示为CSS表格，因此通过覆盖样式来实现这一点，您可能会在显示器中引入其他“错误”。
这是一个更新的小提琴：http://jsfiddle.net/7Y8Jv/3/
原始回答
这是您要找的东西：http://jsfiddle.net/7Y8Jv/1/？
我的标记和样式与你的不一样，但我得到了你要求的垂直居中。
<强>标记
<div class="container">
<div class="row table">
<div class="span6 cell">What Is Lorem Ipsum?</div>
<div class="span6 cell">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div>
</div>
</div>
<强> CSS
.table
{
display: table;
}
.cell
{
display: table-cell;
vertical-align: middle;
}
答案 4 :(得分：0)
听起来你想要两行，每行占据屏幕的一半。
为什么不使用offset3将行移动四分之一（因此将其放在您想要的位置），然后仍然在两个单独的行中使用span6：
<div class="container">
<div class="row">
<div class="offset3 span6">Block 1 - Vertically center me please!</div>
</div>
<div class="row">
<div class="offset3 span6">Block 2- Center me too</div>
</div>
</diV>
JSFiddle：http://jsfiddle.net/mA6Za/3/
答案 5 :(得分：0)
使用jquery的一些技巧......
1）获取带有id
的跨度高度2）为保证金顶部做一些数学
3）然后，设置css
它也适用于窗口调整大小。
关于jsfiddle的演示... http://jsfiddle.net/q49Da/
<div class="container">
<div class="row">
<div id="red" class="span6" style="background: red;width:40%;float:left;margin-right:5%;">
Block 1 - Vertically center me please!<br />
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</div>
<div id="blue" class="span6" style="background: blue;width:40%;float:left;">
Block 2- Center me too<br />
Contrary to popular belief, Lorem Ipsum is not simply random text.
</div>
</div>
</div>
$(document).ready(function() {
var ver_top = ($(window).height() - $('#red').height()) / 2;
$('#red').css( "margin-top", ver_top+'px' );
var ver_top2 = ($(window).height() - $('#blue').height()) / 2;
$('#blue').css( "margin-top", ver_top2+'px' );
$(window).resize(function(){
var ver_top = ($(window).height() - $('#red').height()) / 2;
$('#red').css( "margin-top", ver_top+'px' );
var ver_top2 = ($(window).height() - $('#blue').height()) / 2;
$('#blue').css( "margin-top", ver_top2+'px' );
});
});