css - 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

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>