In a bootstrap responsive page how to center a div

Question

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.

Answer 1

Super cool update for 2024

WebKit Features in Safari 17.4 is adding a way to center vertically without using Flex/Grid by adding align-content: center; on any block element

div { align-content: center; } /* one-line vertical centering */

🚀🚀🚀 Soon is going to be available in all browsers 🚀🚀🚀

https://webkit.org/blog/15063/webkit-features-in-safari-17-4/#css

Update for Bootstrap 5

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

Solution 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 d-flex align-items-center justify-content-center">
  <div 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.