如何垂直对齐Bootstrap 3列中的div
我有一个页面，里面有Twitter Bootstrap container-fluid类div ， row和一个col-md-6 。 行被设置为容器高度的50％，而列的高度为该行的100％。 我在该列中有一个div ，我想要在列的中心。
<body>
<div class="container-fluid cont">
<div class="row logoRow">
<div class="col-md-6 logoCol">
<div class="logoCont center-block"></div>
</div>
</div>
</div>
</body>
风格是：
html, body {
height: 100%;
}
.cont {
height: 100%;
background: blue;
}
.logoRow {
height: 50%;
background: green;
}
.logoCol {
height: 100%;
background: yellow;
}
.logoCont {
height: 50%;
width: 50%;
background: red;
}
这是我的小提琴：http://jsfiddle.net/p9ou30g7/2/
将一个center-block类添加到内部div将其与水平中心对齐，但我也需要将其垂直对齐到列的中心。 所以红色的div在黄色的中心。 如何才能做到这一点？
这是做到这一点的一种方式，并且比flexbox更支持横向浏览器。
http://jsfiddle.net/p9ou30g7/3/
.logoCont {
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%,-50%);
height: 50%;
width: 50%;
background: red;
}
还有其他方法可以在此处查看：https://css-tricks.com/centering-css-complete-guide/
您可以使用CSS3灵活框
只需添加另一个像这样的CSS规则（我修改了一些其他规则以给出div的固定大小，以便您可以看到效果）：
.flexbox {
display:flex;
justify-content:center;
align-items: center;
flex-flow: column;
}
并将其添加到您的HTML
<div class="col-md-6 logoCol flexbox">
这里是小提琴http://jsfiddle.net/1td4Lg5k/
这一定很重要，我可以使用flex吗？
希望能帮助到你
改变与外部股利
style="position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);"
为我的登录框工作
<div class="mainbox col-md-3"... style="position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);">
<div class="panel-heading">
<div class="panel-title">Login</div>
</div>
</div>