In a bootstrap responsive page how to center a div

I need to create a responsive page using bootstrap by position a div at the centre of a page as like in the below mentioned layout.

Solution 1:

UPDATE for Bootstrap 4

Simpler vertical grid alignement with 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>

Solution for 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>

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

Solution 2:

CSS:

html,
body {
    height: 100%;
}

.container {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

HTML:

<div class="container">
  <div>
    example
  </div>
</div>

Example fiddle

Solution 3:

In bootstrap 4

to center the children horizontally, use bootstrap-4 class

justify-content-center

to center the children vertically, use bootstrap-4 class

 align-items-center

but remember don't forget to use d-flex class with these it's a bootstrap-4 utility class, like so

<div class="d-flex justify-content-center align-items-center" style="height:100px;">
    <div class="bg-primary">MIDDLE</div>    
</div>

Note: make sure to add bootstrap-4 utilities if this code does not work

Solution 4:

Update for Bootstrap 4

Now that Bootstrap 4 is flexbox, vertical alignment is easier. Given a full height flexbox div, just us my-auto for even top and bottom margins...

<div class="container h-100 d-flex justify-content-center">
    <div class="jumbotron my-auto">
      <h1 class="display-3">Hello, world!</h1>
    </div>
</div>

http://codeply.com/go/ayraB3tjSd/bootstrap-4-vertical-center

Vertical center in Bootstrap 4