Aşağıda belirtilen düzende olduğu gibi sayfanın ortasına bir div yerleştirerek önyükleme kullanarak duyarlı bir sayfa oluşturmam gerekiyor.

Bootstrap 4 için GÜNCELLEME

Esnek kutu ile daha basit dikey ızgara hizalaması

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

Bootstrap 3 için Çözüm

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

Bu, tüm ekran boyutlarında yatay ve dikey olarak ortalanmış basit bir örnektir.

CSS:

html,
body {
    height: 100%;
}

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

HTML:

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

Örnek keman

In bootstrap 4

için yatay oğul merkezi , araç kullanımı önyükleme-4 sınıfı

justify-content-center

için dikey oğul merkezi , araç kullanımı önyükleme-4 sınıfı

 align-items-center

ancak bunlarla d-flex sınıfını kullanmayı unutmayın, bu bir bootstrap-4 yardımcı sınıftır, bunun gibi

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

Not: Bu kod çalışmazsa, bootstrap-4 yardımcı programları eklediğinizden emin olun

Bootstrap 4 güncellemesi

Artık Bootstrap 4 flexbox olduğuna göre dikey hizalama daha kolay. Tam yükseklikte bir flexbox div verildiğinde, my-autoüst ve alt kenar boşlukları için sadece biz ...

<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

Bootstrap 4'te dikey merkez

CSS'de herhangi bir değişiklik yapmanıza gerek yok, bunu doğrudan sınıfta yazabilirsiniz ve sonucu alırsınız.

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

ekran tablosu olmadan ve önyükleme olmadan, bunu yapmayı tercih ederim

<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

İyi cevap ppollono. Sadece oyun oynuyordum ve biraz daha iyi bir çözüm buldum. CSS aynı kalacaktır, yani:

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

Ancak HTML için:

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

Bu yeterli olacaktır.

En iyi yol değil ama yine de işe yarayacak

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

Bootstrap ile düzeni gerçekleştirmenin en basit yolu şöyle:

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

Tüm yaptığım, div'i ortalamama izin veren div katmanları eklemekti, ancak yüzdeleri kullanmadığım için, div'in maksimum genişliğini ortalamak için belirtmeniz gerekiyor.

Birden fazla sütunu ortalamak için aynı yöntemi kullanabilirsiniz, yalnızca daha fazla div katmanı eklemeniz gerekir:

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

Not: md, sm ve xs için sütun 12'ye sahip bir div ekledim, bunu yapmazsanız arka plan rengine sahip ilk div (bu durumda "blueviolet") çökecek, alt div'leri görebileceksiniz. ama arka plan rengi değil.

Bootstrap 4.3.1'in gerçek sürümü için şunu kullanın:

stil

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

kod

<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

Deneyin, Örnek için sabit bir yükseklik kullandım. Duyarlı senaryoyu etkilemediğini düşünüyorum.

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

Bootstrap 4'te şunları kullanın:

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

Ayrıca ne istediğinize bağlı olarak konumu değiştirebilirsiniz:

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

Referans burada

İşte herhangi bir div'i merkeze koyan basit CSS kuralları

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

En basit çözüm, aşağıdaki gibi her iki tarafa da bir boş sütun eklemek olacaktır:

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