Saya perlu membuat halaman responsif menggunakan bootstrap dengan posisi div di tengah halaman seperti pada tata letak yang disebutkan di bawah ini.

UPDATE untuk Bootstrap 4

Penyelarasan kisi vertikal yang lebih sederhana dengan kotak fleksibel

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

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

Ini adalah contoh sederhana dari div horizontal dan vertikal yang berpusat di semua ukuran layar.

CSS:

html,
body {
    height: 100%;
}

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

HTML:

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

Contoh biola

Di bootstrap 4

untuk memusatkan anak-anak secara horizontal , gunakan kelas bootstrap-4

justify-content-center

untuk memusatkan anak-anak secara vertikal , gunakan kelas bootstrap-4

 align-items-center

tapi ingat jangan lupa untuk menggunakan kelas d-flex dengan ini kelas utilitas bootstrap-4, seperti itu

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

Catatan: pastikan untuk menambahkan utilitas bootstrap-4 jika kode ini tidak berfungsi

Pembaruan untuk Bootstrap 4

Sekarang Bootstrap 4 adalah flexbox, perataan vertikal lebih mudah. Diberikan div flexbox tinggi penuh, hanya kami my-autountuk margin atas dan bawah ...

<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

Pusat vertikal di Bootstrap 4

Anda tidak perlu mengubah apa pun dalam CSS Anda bisa langsung menulis ini di kelas dan Anda akan mendapatkan hasilnya.

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

tanpa display table dan tanpa bootstrap, saya lebih suka melakukannya

<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

Jawaban bagus ppollono. Saya hanya bermain-main dan saya mendapat solusi yang sedikit lebih baik. CSS akan tetap sama, yaitu:

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

Tetapi untuk HTML:

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

Ini sudah cukup.

Bukan cara terbaik, tetapi masih akan berhasil

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

Saya pikir cara paling sederhana untuk menyelesaikan tata letak dengan bootstrap adalah seperti ini:

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

semua yang saya lakukan adalah menambahkan lapisan div yang memungkinkan saya untuk memusatkan div, tetapi karena saya tidak menggunakan persentase, Anda perlu menentukan lebar maksimum div untuk menjadi pusat.

Anda dapat menggunakan metode yang sama ini untuk memusatkan lebih dari satu kolom, Anda hanya perlu menambahkan lebih banyak lapisan 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>

Catatan: bahwa saya menambahkan div dengan kolom 12 untuk md, sm dan xs, jika Anda tidak melakukan ini div pertama dengan warna latar belakang (dalam hal ini "blueviolet") akan runtuh, Anda akan dapat melihat div anak , tapi bukan warna latar belakang.

Untuk versi aktual dari penggunaan Bootstrap 4.3.1

Gaya

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

Kode

<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

Coba ini, Sebagai contoh, saya menggunakan ketinggian tetap. Saya pikir itu tidak mempengaruhi skenario responsif.

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

Di Bootstrap 4, gunakan:

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

Anda juga dapat mengubah posisi tergantung pada apa yang Anda inginkan:

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

Referensi di sini

Berikut adalah aturan CSS sederhana yang menempatkan div di tengah

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

Solusi paling sederhana akan menambahkan satu kolom kosong di kedua sisi seperti di bawah ini:

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