我需要使用引导程序创建一个响应式页面,方法是将 div 定位在页面的中心,如下面提到的布局所示。
Bootstrap 5 的更新
使用 flex-box 更简单的垂直网格对齐
@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 的简单示例。