Html 如何在 Bootstrap 3 列中垂直对齐 div
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/30966450/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to vertically align div inside Bootstrap 3 column
提问by mofoyoda
I have a page with Twitter Bootstrap container-fluidclass div, one rowand one col-md-6inside that row. Row is set to 50% height of the container, and a column has 100% height of the row. I have a divinside that column, that I want to be in the center of the column.
我有一个带有 Twitter Bootstrapcontainer-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>
And the style is:
风格是：
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;
}
Here is my fiddle of this: http://jsfiddle.net/p9ou30g7/2/
这是我的小提琴：http: //jsfiddle.net/p9ou30g7/2/
Adding a center-blockclass to inner div aligned it to horizontal center, but I also need to align it vertically to the center of the column.
So that red div is in the center of the yellow one.
How can this be done?
向center-block内部 div添加一个类将其与水平中心对齐，但我还需要将其垂直对齐到列的中心。所以红色 div 位于黄色 div 的中心。如何才能做到这一点？
回答by Muhammad Umer
This is one way to do it, and is more crossbrowser supported than flexbox.
这是一种方法，并且比 flexbox 更支持跨浏览器。
http://jsfiddle.net/p9ou30g7/3/
http://jsfiddle.net/p9ou30g7/3/
.logoCont {
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%,-50%);
height: 50%;
width: 50%;
background: red;
}
There are other ways that you can check out here: https://css-tricks.com/centering-css-complete-guide/
您还可以通过其他方式查看：https: //css-tricks.com/centering-css-complete-guide/
回答by Eric Martinez
You can use the CSS3 Flexible boxes
您可以使用CSS3 灵活框
Just add another CSS rule like this (I modified a little bit the other rules to give the divs fixed sizes so you can see the effect) :
只需添加另一个这样的 CSS 规则（我稍微修改了其他规则以赋予 div 固定大小，以便您可以看到效果）：
.flexbox {
display:flex;
justify-content:center;
align-items: center;
flex-flow: column;
}
and add it to your HTML
并将其添加到您的 HTML
<div class="col-md-6 logoCol flexbox">
Here's the fiddle http://jsfiddle.net/1td4Lg5k/
这是小提琴http://jsfiddle.net/1td4Lg5k/
And this must be important to see Can I use flex?
这一定很重要，我可以使用 flex 吗？
Hope it helps
希望能帮助到你
回答by Dennis Jensen
Alter the outer div with
改变外部 div
style="position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);"
Worked for my login box
为我的登录框工作
<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>
