Bootstrap 4的更新

使用flex-box简化垂直网格对齐

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css');

html,

body {

  height: 100%

}


<div class="h-100 row align-items-center">

  <div class="col" 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的简单示例。