如何垂直對齊Bootstrap 3列中的div
[英]How to vertically align div inside Bootstrap 3 column
問題描述
我有一個Twitter Bootstrap container-fluid類div ，該row有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位於黃色的中心。 如何才能做到這一點？
3 個解決方案
解決方案1
14 已采納 2015-06-21 16:16:51
這是一種方法，並且比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/
解決方案2
6 2015-06-21 16:14:55
您可以使用CSS3 Flexible框
只需添加另一個這樣的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/
這一點必須重要，看我可以使用flex嗎？
希望能幫助到你
解決方案3
2 2016-12-15 08:21:07
改變外部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>
在div列引導程序中垂直對齊文本中心
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.