In a bootstrap responsive page how to center a div

The Solution to In a bootstrap responsive page how to center a div is

UPDATE for Bootstrap 4

Simpler vertical grid alignement with flex-box

_x000D_
_x000D_ 
@import url('https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css');_x000D_
html,_x000D_
body {_x000D_
  height: 100%_x000D_
}
_x000D_ 
<div class="h-100 row align-items-center">_x000D_
  <div class="col" style="background:red">_x000D_
    TEXT_x000D_
  </div>_x000D_
</div>
_x000D_
_x000D_
_x000D_

Solution for Bootstrap 3

_x000D_
_x000D_ 
@import url('http://getbootstrap.com/dist/css/bootstrap.css');_x000D_
 html, body, .container-table {_x000D_
    height: 100%;_x000D_
}_x000D_
.container-table {_x000D_
    display: table;_x000D_
}_x000D_
.vertical-center-row {_x000D_
    display: table-cell;_x000D_
    vertical-align: middle;_x000D_
}
_x000D_ 
<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.1.0/bootstrap.min.js"></script>_x000D_
_x000D_
<div class="container container-table">_x000D_
    <div class="row vertical-center-row">_x000D_
        <div class="text-center col-md-4 col-md-offset-4" style="background:red">TEXT</div>_x000D_
    </div>_x000D_
</div>
_x000D_
_x000D_
_x000D_

It's a simple example of a horizontally and vertically div centered in all screen sizes.

~ Answered on 2013-11-22 17:16:22

Most Viewed Questions: