mof*_*oda 6 html css vertical-alignment twitter-bootstrap twitter-bootstrap-3
我有一个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位于黄色的中心.如何才能做到这一点？
Muh*_*mer 14
这是一种方法,并且比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/
您可以使用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吗？
希望能帮助到你