Html 如何在Bootstrap 3列中垂直对齐div_Html_Css_Twitter Bootstrap_Twitter Bootstrap 3_Vertical Alignment

Html 如何在Bootstrap 3列中垂直对齐div

html css twitter-bootstrap twitter-bootstrap-3

Html 如何在Bootstrap 3列中垂直对齐div,html,css,twitter-bootstrap,twitter-bootstrap-3,vertical-alignment,Html,Css,Twitter Bootstrap,Twitter Bootstrap 3,Vertical Alignment,我有一个页面，上面有Twitter Bootstrapcontainer fluidclassdiv，一个row和一个col-md-6。行设置为容器高度的50%，列设置为行高度的100%。在该列中有一个div，我希望它位于该列的中心 <body> <div class="container-fluid cont"> <div class="row logoRow"> <div class="col-md-6

我有一个页面，上面有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>

这是我的小提琴：

向内部div添加一个

中心块

类将其与水平中心对齐，但我还需要将其与柱的中心垂直对齐。因此，红色div位于黄色div的中心。如何做到这一点？

您可以使用

只需添加另一个类似这样的CSS规则（我对其他规则做了一点修改，使divs的大小固定，以便您可以看到效果）：

并将其添加到HTML中

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

这是小提琴

这一定很重要

希望它有帮助

这是一种方法，比flexbox更支持交叉浏览器

您还可以通过其他方式在此处查看：

用

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>


登录

行高

是最简单的选择，如果可能的话，提供内部内容。你的答案很棒，在毫秒内解决了我的问题！奇妙的解决方案。这是为了我。非常有用的小提琴：）非常感谢。

.logoCont {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%,-50%);
    height: 50%;
    width: 50%;
    background: red;
}

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>