如何在 Bootstrap 3 列中垂直对齐 div
Posted
技术标签:
【中文标题】如何在 Bootstrap 3 列中垂直对齐 div【英文标题】：How to vertically align div inside Bootstrap 3 column 【发布时间】：2015-09-07 02:35:03 【问题描述】：我在该行中有一个带有 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 位于黄色 div 的中心。
如何做到这一点？
【问题讨论】：
line-height 是最简单的选择，如果可能的话
提供小提琴里面的内容。
【参考方案1】：
用
改变外部divstyle="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>
【讨论】：
【参考方案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/
【讨论】：
很棒的解决方案。这为我做到了。非常有用的小提琴:)）非常感谢。【参考方案3】：您可以使用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?这一定很重要
希望对你有帮助
【讨论】：
你的回答太棒了，在一毫秒内解决了我的问题！以上是关于如何在 Bootstrap 3 列中垂直对齐 div的主要内容，如果未能解决你的问题，请参考以下文章
Twitter bootstrap 3 - 在一行中垂直对齐列[中]
将 div 与 Bootstrap 列中的相邻 div 对齐
如何将 Bootstrap 4 中的 SVG 垂直对齐到行高？