如何在 Bootstrap 3 列内垂直对齐 div

Question

我有一个包含 Twitter Bootstrap container-fluid class 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;
}

这是我的 fiddle：http://jsfiddle.net/p9ou30g7/2/

将 center-block class 添加到内部 div 使其水平居中对齐，但我还需要将其垂直对齐到列的中心。所以红色 div 在黄色的中间。如何做到这一点？

Answer 1

您可以使用 CSS3 Flexible boxes

只需像这样添加另一个 CSS 规则（我稍微修改了其他规则以赋予 div 固定大小，以便您可以看到效果）：

.flexbox {
 display:flex;
 justify-content:center;
 align-items: center;
 flex-flow: column;
}

并将其添加到您的 HTML

<div class="col-md-6 logoCol flexbox">

这是fiddlehttp://jsfiddle.net/1td4Lg5k/

这一定很重要 Can I use flex?

希望对您有所帮助

Answer 2

这是一种方法，比 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/

Answer 3

将外部 div 更改为

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>

如何在 Bootstrap 3 列内垂直对齐 div

How to vertically align div inside Bootstrap 3 column

html

css

vertical-alignment

twitter-bootstrap

twitter-bootstrap-3