我想用最新的引导v3在div块中设置垂直中间内容。2.0.
我已经阅读了垂直对齐引导3的答案，但是它使用了float:none在div块中。
但是，我不能使用float:none根据我们的布局在div块中。
我有这个代码：
<div class="container">
<div class="col-lg-4">....</div>
<div class="col-lg-5">....</div>
<div class="col-lg-3">....</div>
</div>
块1中的内容高度是动态的。我想根据区块1的高度设置区块2和区块3中的垂直中间内容。
这就是我们目前的布局：
Block 1 Block 2 Block 3
------------------ ------------------ ------------------
| Content Height | Content | Content |
| is |------------------ ------------------
| Dynamic |
------------------
如果，我将使用浮动：无；所以，这是我们的布局看起来：
Block 1 Block 2
------------------ ------------------
| Content Height | |
| is | Content |
| Dynamic | |
------------------ ------------------
Block 3
------------------
| Content |
------------------
这是我希望它看起来的样子：
Block 1 Block 2 Block 3
------------------ ------------------ ------------------
| Content Height | | |
| is | Content | Content |
| Dynamic | | |
------------------ ------------------ ------------------
我发现实现这一点的最佳方法是在容器中创建一个表布局：
看看这把小提琴：http://jsfiddle.net/StephanWagner/Zn79G/9/embedded/result
<div class="container">
<div class="table-container">
<div class="col-table-cell col-lg-4">A<br>A<br>A<br>A<br>A<br>A<br>A</div>
<div class="col-table-cell col-lg-5">B</div>
<div class="col-table-cell col-lg-3">C</div>
</div>
</div>
@media (min-width: 1200px) {
.table-container {
display: table;
table-layout: fixed;
width: 100%;
}
.table-container .col-table-cell {
display: table-cell;
vertical-align: middle;
float: none;
}
}
媒体查询确保内容只是大显示器中的一个表，否则它将像以前一样堆叠。
这对我很有用：
.container > div {
float: none;
display: table-cell;
vertical-align: middle;
}
引导示例
.container {
position: relative;
height: 14rem;
border: 1px solid;
}
.jumbotron {
position: absolute;
top: 50%;
left:50%;
transform: translate(-50%,-50%);
border: 1px dashed deeppink;
}<div class="container theme-showcase" role="main">
<div class="jumbotron">
I want to center this div with Bootstrap.
</div>
</div>