CSS:

html,
body {
    height: 100%;
}

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

HTML:

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

Przykład

Aktualizacja dla Bootstrap 4

Teraz, gdy Bootstrap 4 jest flexbox, wyrównanie w pionie jest łatwiejsze. Biorąc pod uwagę pełną wysokość flexbox div, tylko my my-auto dla parzystych górnych i dolnych marginesów...

<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

Pionowe centrum w Bootstrap 4

In bootstrap 4

Aby wyśrodkować dzieci poziomo, Użyj klasy bootstrap-4

justify-content-center

Aby wyśrodkować dzieci pionowo, Użyj klasy bootstrap-4

 align-items-center

Ale pamiętaj, nie zapomnij użyć klasy D-flex z tymi jest to klasa użytkowa bootstrap-4, Jak tak

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

Uwaga: upewnij się, że dodałeś narzędzia bootstrap-4, Jeśli ten kod nie działa

Bez display table i bez bootstrap , wolałbym to zrobić

<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

Dobra odpowiedź ppollono. Bawiłem się i znalazłem nieco lepsze rozwiązanie. CSS pozostanie taki sam, tzn.:

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

Ale dla HTML:

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

Myślę, że najprostszy sposób na wykonanie layoutu z bootstrap jest taki:

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

Wszystko, co zrobiłem, to dodanie warstw div, które pozwoliły mi wyśrodkować div, ale ponieważ nie używam procentów, musisz określić maksymalną szerokość div, aby być Centrum.

Możesz użyć tej samej metody, aby wyśrodkować więcej niż jedną kolumnę, wystarczy dodać więcej warstw div:

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

Uwaga: dodałem div z kolumną 12 dla md, sm i xs, jeśli tego nie zrobisz pierwszy div z kolorem tła (w tym przypadku "blueviolet") zapadnie się, będziesz mógł zobaczyć div dziecka, ale nie kolor tła.

Oto proste reguły CSS, które umieszczają dowolny div w środku

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

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