我需要使用 bootstrap 将 div 放置在页面的中心来创建响应式页面，如下面提到的布局所示。
Bootstrap 5 更新
使用弹性盒进行简单的垂直网格对齐
@import url('https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.1/css/bootstrap.min.css');
html,
body {
height: 100%
}
<div class="h-100 d-flex align-items-center justify-content-center">
<div style="background:red">
TEXT
</div>
</div>
Bootstrap 4 的解决方案
使用弹性盒进行简单的垂直网格对齐
@import url('https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css');
html,
body {
height: 100%
}
<div class="h-100 d-flex align-items-center justify-content-center">
<div style="background:red">
TEXT
</div>
</div>
Bootstrap 3 的解决方案
@import url('http://getbootstrap.com/dist/css/bootstrap.css');
html, body, .container-table {
height: 100%;
}
.container-table {
display: table;
}
.vertical-center-row {
display: table-cell;
vertical-align: middle;
}
<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.1.0/bootstrap.min.js"></script>
<div class="container container-table">
<div class="row vertical-center-row">
<div class="text-center col-md-4 col-md-offset-4" style="background:red">TEXT</div>
</div>
</div>
这是一个在所有屏幕尺寸中水平和垂直居中的 div 的简单示例。
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
