[英]How to vertically center a Bootstrap container?
如何在此Bootstrap容器div中垂直居中? 我想要它,所以我查看它的页面垂直居中,并且在div上方和下方都有黑色。
演示: https : //jsfiddle.net/yunr225g/
HTML:
<div class="container">
<div class="row">
<div class="col-md-6 text-center">
<img src="http://placehold.it/250x250">
<button type="submit">Stay</button>
</div>
<div class="col-md-6 text-center">
<img src="http://placehold.it/250x250">
<button type="submit">Leave</button>
</div>
</div>
</div>
CSS:
body {
margin: 10px;
background:black;
}
button {
display:block;
text-align:center;
margin:0 auto;
margin:60px auto;
background:black;
border:2px solid #ffca00;
padding:30px;
width:250px;
color:#ffca00;
text-transform:uppercase;
}
首先,您必须将容器的所有父元素设置为height:100%
,或直接使用height:100vh
。 然后,使用position
+ transform
技巧将其垂直居中。
这在较大的屏幕上效果很好,对于较小的屏幕,您可能需要通过媒体查询+断点进行调整。
html, body {
height: 100%;
}
body {
margin: 0;
background: black;
}
.container {
position: relative;
top: 50%;
transform: translateY(-50%);
border: 1px solid red;
}
或者,尝试使用这种CSS表方法,它似乎运行良好,并且不会影响Bootstrap网格。 注意,添加了两个额外的div作为包装器。
html, body {
height: 100%;
}
body {
margin: 0;
background: black;
}
.container1 {
display: table;
width: 100%;
height: 100%;
}
.container2 {
display: table-cell;
vertical-align: middle;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.