Ho bisogno di creare una pagina reattiva usando bootstrap posizionando un div al centro di una pagina come nel layout sotto indicato.

AGGIORNAMENTO per Bootstrap 4

Allineamento della griglia verticale più semplice con la scatola flessibile

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

Soluzione per 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>

È un semplice esempio di un div centrato orizzontalmente e verticalmente in tutte le dimensioni dello schermo.

CSS:

html,
body {
    height: 100%;
}

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

HTML:

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

Esempio di violino

Nel bootstrap 4

per centrare i bambini in orizzontale , utilizzare la classe bootstrap-4

justify-content-center

per centrare verticalmente i bambini , utilizzare la classe bootstrap-4

 align-items-center

ma ricorda di non dimenticare di usare la classe d-flex con queste è una classe di utilità bootstrap-4, in questo modo

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

Nota: assicurarsi di aggiungere utilità bootstrap-4 se questo codice non funziona

Aggiornamento per Bootstrap 4

Ora che Bootstrap 4 è flexbox, l'allineamento verticale è più semplice. Dato un div di flexbox a tutta altezza, solo noi my-autoper i margini superiore e inferiore ...

<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

Centro verticale in Bootstrap 4

Non è necessario modificare nulla nei CSS, puoi scriverlo direttamente in classe e otterrai il risultato.

<div class="col-lg-4 col-md-4 col-sm-4 container justify-content-center">
  <div class="col" style="background:red">
    TEXT
  </div>
</div>

senza tabella di visualizzazione e senza bootstrap, preferirei farlo

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


 html, body, .container-table {
    height: 100%;
}
.container-table {
    width:100vw;
  height:150px;
  border:1px solid black;
}
.vertical-center-row {
   margin:auto;
  width:30%;
  padding:63px;
  text-align:center;

}

http://codepen.io/matoeil/pen/PbbWgQ

Buona risposta ppollono. Stavo solo giocando e ho ottenuto una soluzione leggermente migliore. Il CSS rimarrebbe lo stesso, cioè:

html, body, .container {
    height: 100%;
}
.container {
    display: table;
    vertical-align: middle;
}
.vertical-center-row {
    display: table-cell;
    vertical-align: middle;
}

Ma per HTML:

<div class="container">
    <div class="vertical-center-row">
        <div align="center">TEXT</div>
    </div>
</div>

Questo sarebbe abbastanza.

Non è il modo migliore, ma funzionerà comunque

<div class="container-fluid h-100">
<div class="row h-100">
<div class="col-lg-12"></div>
<div class="col-lg-12">
<div class="row h-100">
  <div class="col-lg-4"></div>
  <div class="col-lg-4 border">
    This div is in middle
  </div>
  <div class="col-lg-4"></div>
</div>

</div>
<div class="col-lg-12"></div>
</div>

</div>

Penso che il modo più semplice per realizzare il layout con bootstrap sia così:

<section>
<div class="container">
    <div class="row">
        <div align="center">
            <div style="max-width: 200px; background-color: blueviolet;">
                <div>
                    <h1 style="color: white;">Content goes here</h1>
                </div>
            </div>
        </div>
    </div>
</div>

tutto quello che ho fatto è stato aggiungere strati di div che mi permettessero di centrare il div, ma poiché non sto usando le percentuali, devi specificare la larghezza massima del div come centro.

Puoi usare questo stesso metodo per centrare più di una colonna, devi solo aggiungere più div layer:

<div class="container">
    <div class="row">
        <div align="center">
            <div style="max-width: 400px; background-color: blueviolet;">
                <div class="col-md-12 col-sm-12 col-xs-12" style="background-color: blueviolet;">
                    <div class="col-md-8 col-sm-8 col-xs-12" style="background-color: darkcyan;">
                        <h1 style="color: white;">Some content</h1>
                    </div>
                    <div class="col-md-4 col-sm-4 col-xs-12" style="background-color: blue;">
                        <p style="color: white;">More content</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Nota: che ho aggiunto un div con la colonna 12 per md, sm e xs, se non lo fai il primo div con il colore di sfondo (in questo caso "blueviolet") collasserà, sarai in grado di vedere i div figlio , ma non il colore di sfondo.

Per la versione effettiva di Bootstrap 4.3.1 utilizzare

Stile

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<style type="text/css">
html, body {
    height: 100%;
}
</style>

Codice

<div class="h-100 d-flex justify-content-center">
<div class="jumbotron my-auto">
<!-- example content -->
<div class="alert alert-success" role="alert">
<h4 class="alert-heading">Title</h4>
<p>Desc</p>
</div>
<!-- ./example content -->
</div>
</div

Prova questo, ad esempio, ho usato un'altezza fissa. Penso che non influisca sullo scenario reattivo.

<html lang="en">
<head>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
</head>
<body>
    <div class="d-flex justify-content-center align-items-center bg-secondary w-100" style="height: 300px;">
        <div class="bg-primary" style="width: 200px; height: 50px;"></div>
    </div>
</body>
</html>

In Bootstrap 4, utilizzare:

<div class="d-flex justify-content-center">...</div>

Puoi anche cambiare la posizione in base a ciò che desideri:

<div class="d-flex justify-content-start">...</div>
<div class="d-flex justify-content-end">...</div>
<div class="d-flex justify-content-between">...</div>
<div class="d-flex justify-content-around">...</div>

Riferimento qui

Ecco semplici regole CSS che mettono al centro qualsiasi div

.centered {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

https://css-tricks.com/quick-css-trick-how-to-center-an-object-exactly-in-the-center/

La soluzione più semplice sarà l'aggiunta di una colonna vuota su entrambi i lati come di seguito:

  <div class="row form-group">

    <div class="col-3"></div>

    <ul class="list-group col-6">
      <li class="list-group-item active">Yuvraj Patil</li>
    </ul>

    <div class="col-3"></div>
  </div>

jsFiddle

HTML :

<div class="container" id="parent">
  <div class="row">
    <div class="col-lg-12">text
      <div class="row ">
        <div class="col-md-4 col-md-offset-4" id="child">TEXT</div>
      </div>
    </div>
  </div>
</div>

CSS :

#parent {    
    text-align: center;
}
#child {
    margin: 0 auto;
    display: inline-block;
    background: red;
    color: white;
}