Question

我有一个包含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位于黄色的中心。怎么办呢？

Answer 1

这是一种方法，并且比flexbox支持更多的crossbrowser。

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 2

您可以使用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">

这里是小提琴http://jsfiddle.net/1td4Lg5k/

要看Can I use flex?

，这一点非常重要

希望有所帮助

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

3 个答案: