Bagaimana cara memusatkan wadah secara vertikal di Bootstrap?

Saya sedang mencari cara untuk memusatkan containerdiv secara vertikal di dalam jumbotrondan untuk meletakkannya di tengah halaman.

The .jumbotronharus disesuaikan dengan tinggi penuh dan lebar layar. The .containerdiv memiliki lebar 1025pxdan harus di tengah-tengah halaman (vertikal pusat).

Saya ingin halaman ini memiliki jumbotron yang disesuaikan dengan tinggi dan lebar layar bersama dengan wadah yang secara vertikal berada di tengah jumbotron. Bagaimana saya bisa mencapainya?

.jumbotron {
  height:100%;
  width:100%;
}
.container {
  width:1025px;
}
.jumbotron .container {
  max-width: 100%;
} 

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="jumbotron">
    <div class="container text-center">
        <h1>The easiest and powerful way</h1>
        <div class="row">
            <div class="col-md-7">
                 <div class="top-bg"></div>
            </div>

            <div class="col-md-5 iPhone-features" style="margin-left:-25px;">
                <ul class="top-features">
                    <li>
                        <span><i class="fa fa-random simple_bg top-features-bg"></i></span>
                        <p><strong>Redirect</strong><br>Visitors where they converts more.</p>
                    </li>
                    <li>
                        <span><i class="fa fa-cogs simple_bg top-features-bg"></i></span>
                        <p><strong>Track</strong><br>Views, Clicks and Conversions.</p>
                    </li>
                    <li>
                        <span><i class="fa fa-check simple_bg top-features-bg"></i></span>
                        <p><strong>Check</strong><br>Constantly the status of your links.</p>
                    </li>
                    <li>
                        <span><i class="fa fa-users simple_bg top-features-bg"></i></span>
                        <p><strong>Collaborate</strong><br>With Customers, Partners and Co-Workers.</p>
                    </li>
                        <a href="pricing-and-signup.html" class="btn-primary btn h2 lightBlue get-Started-btn">GET STARTED</a>
                        <h6 class="get-Started-sub-btn">FREE VERSION AVAILABLE!</h6>
                </ul>
            </div>
        </div>
    </div>
</div>

Cara kotak yang fleksibel

Perataan vertikal sekarang sangat sederhana dengan menggunakan tata letak kotak fleksibel . Saat ini, metode ini didukung di berbagai browser web kecuali Internet Explorer 8 & 9. Oleh karena itu kita perlu menggunakan beberapa hacks / polyfill atau pendekatan yang berbeda untuk IE8 / 9.

Berikut ini saya akan menunjukkan kepada Anda bagaimana melakukannya hanya dalam 3 baris teks (terlepas dari sintaks flexbox lama) .

Catatan: lebih baik menggunakan kelas tambahan daripada mengubah .jumbotronuntuk mencapai perataan vertikal. Saya akan menggunakan vertical-centernama kelas misalnya.

Contoh Di Sini (A Mirror on jsbin) .

<div class="jumbotron vertical-center"> <!-- 
                      ^--- Added class  -->
  <div class="container">
    ...
  </div>
</div>

.vertical-center {
  min-height: 100%;  /* Fallback for browsers do NOT support vh unit */
  min-height: 100vh; /* These two lines are counted as one :-)       */

  display: flex;
  align-items: center;
}

Catatan penting (Dipertimbangkan dalam demo) :

1. Sebuah persentase nilai heightatau min-heightsifat relatif terhadap heightelemen induk, karena itu Anda harus menentukan heightinduk eksplisit.

2. Sintaks flexbox prefixed / old vendor dihilangkan dalam snippet yang diposting karena singkatnya, tetapi ada dalam contoh online.

3. Dalam beberapa web browser lama seperti Firefox 9 ^{(di mana saya telah diuji)} , wadah fleksibel - .vertical-centerdalam hal ini - tidak akan mengambil ruang yang tersedia dalam induk, oleh karena itu kita perlu menentukan widthproperti seperti: width: 100%.

4. Juga di beberapa browser web seperti yang disebutkan di atas, item fleksibel - .containerdalam hal ini - mungkin tidak muncul di tengah secara horizontal. Tampaknya diterapkan kiri / kanan margindari autotidak memiliki efek pada item fleksibel.
   Karena itu kita perlu menyelaraskannya dengan box-pack / justify-content.

Untuk perincian lebih lanjut dan / atau penyejajaran vertikal kolom, Anda bisa merujuk ke topik di bawah ini:

• menyelaraskan vertikal dengan Bootstrap 3

Cara tradisional untuk browser web lawas

Ini adalah jawaban lama yang saya tulis pada saat saya menjawab pertanyaan ini. Metode ini telah dibahas di sini dan seharusnya berfungsi di Internet Explorer 8 dan 9 juga. Saya akan menjelaskannya secara singkat:

Dalam aliran inline, elemen level inline dapat disejajarkan secara vertikal ke tengah dengan vertical-align: middledeklarasi. Spesifikasi dari W3C :

tengah
Sejajarkan titik tengah vertikal kotak dengan garis dasar kotak induk ditambah setengah tinggi x induk.

Dalam kasus dimana induk - .vertical-centerelemen dalam kasus ini - memiliki eksplisit height, kebetulan jika kita dapat memiliki elemen anak yang sama persis heightdengan induknya, kita akan dapat memindahkan garis dasar induk ke titik tengah penuh anak tinggi dan secara mengejutkan membuat anak in-flow yang diinginkan .container- selaras dengan pusat secara vertikal.

Menyatukan semua

Yang sedang berkata, kita bisa membuat elemen penuh-tinggi di dalam elemen .vertical-centerby ::beforeatau ::afterpseudo dan juga mengubah displaytipe defaultnya dan anak lain, the .containerke inline-block.

Kemudian gunakan vertical-align: middle;untuk meluruskan elemen sebaris secara vertikal.

Ini dia:

<div class="jumbotron vertical-center">
  <div class="container">
    ...
  </div>
</div>

.vertical-center {
  height:100%;
  width:100%;

  text-align: center;  /* align the inline(-block) elements horizontally */
  font: 0/0 a;         /* remove the gap between inline(-block) elements */
}

.vertical-center:before {    /* create a full-height inline block pseudo=element */
  content: " ";
  display: inline-block;
  vertical-align: middle;    /* vertical alignment of the inline element */
  height: 100%;
}

.vertical-center > .container {
  max-width: 100%;

  display: inline-block;
  vertical-align: middle;  /* vertical alignment of the inline element */
                           /* reset the font property */
  font: 16px/1 "Helvetica Neue", Helvetica, Arial, sans-serif;
}

DEMO KERJA .

Juga, untuk mencegah masalah tak terduga di layar ekstra kecil, Anda dapat mengatur ulang ketinggian elemen pseudo ke autoatau 0atau mengubah displaytipenya nonejika diperlukan:

@media (max-width: 768px) {
  .vertical-center:before {
    height: auto;
    /* Or */
    display: none;
  }
}

DEMO DIPERBARUI

Dan satu hal lagi:

Jika ada footer/ headerbagian di sekitar wadah, lebih baik posisikan elemen-elemen itu dengan benar ( relative, absolute? Terserah Anda.) Dan tambahkan z-indexnilai yang lebih tinggi (untuk jaminan) agar tetap di atas yang lain.

Perbarui 2019

Bootstrap 4 menyertakan flexbox, sehingga metode pemusatan vertikal jauh lebih mudah dan tidak memerlukan CSS tambahan .

Cukup gunakan d-flexdan align-items-centerkelas utilitas ..

<div class="jumbotron d-flex align-items-center">
  <div class="container">
    content
  </div>
</div>

http://www.codeply.com/go/ui6ABmMTLv

Penting: Pemusatan vertikal relatif terhadap ketinggian . Wadah induk dari item yang Anda coba pusatkan harus memiliki ketinggian yang ditentukan . Jika Anda ingin ketinggian halaman digunakan vh-100atau min-vh-100pada induknya! Sebagai contoh:

<div class="jumbotron d-flex align-items-center min-vh-100">
  <div class="container text-center">
    I am centered vertically
  </div>
</div>

tambahkan Bootstrap.css lalu tambahkan ini ke css Anda

   
html, body{height:100%; margin:0;padding:0}
 
.container-fluid{
  height:100%;
  display:table;
  width: 100%;
  padding: 0;
}
 
.row-fluid {height: 100%; display:table-cell; vertical-align: middle;}
 
 

.centering {
  float:none;
  margin:0 auto;
}

Now call in your page 

<div class="container-fluid">
    <div class="row-fluid">
        <div class="centering text-center">
           Am in the Center Now :-)
        </div>
    </div>
</div>

Di Bootstrap 4 :

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

justify-content-center

untuk memusatkan 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;">
    <span class="bg-primary">MIDDLE</span>    
</div>

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

Saya tahu itu bukan jawaban langsung untuk pertanyaan ini tetapi mungkin membantu seseorang

Teknik pilihan saya:

body {
  display: table;
  position: absolute;
  height: 100%;
  width: 100%;
}

.jumbotron {
   display: table-cell;
   vertical-align: middle;
}

Demo

body {
  display: table;
  position: absolute;
  height: 100%;
  width: 100%;
}

.jumbotron {
   display: table-cell;
   vertical-align: middle;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<div class="jumbotron vertical-center">
  <div class="container text-center">
    <h1>The easiest and powerful way</h1>
    <div class="row">
      <div class="col-md-7">
        <div class="top-bg">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
      </div>

      <div class="col-md-5 iPhone-features">
        <ul class="top-features">
          <li>
            <span><i class="fa fa-random simple_bg top-features-bg"></i></span>
            <p><strong>Redirect</strong><br>Visitors where they converts more.</p>
          </li>
          <li>
            <span><i class="fa fa-cogs simple_bg top-features-bg"></i></span>
            <p><strong>Track</strong><br>Views, Clicks and Conversions.</p>
          </li>
          <li>
            <span><i class="fa fa-check simple_bg top-features-bg"></i></span>
            <p><strong>Check</strong><br>Constantly the status of your links.</p>
          </li>
          <li>
            <span><i class="fa fa-users simple_bg top-features-bg"></i></span>
            <p><strong>Collaborate</strong><br>With Customers, Partners and Co-Workers.</p>
          </li>
          <a href="pricing-and-signup.html" class="btn-primary btn h2 lightBlue get-Started-btn">GET STARTED</a>
          <h6 class="get-Started-sub-btn">FREE VERSION AVAILABLE!</h6>
        </ul>
      </div>
    </div>
  </div>
</div>

Lihat juga Fiddle ini !

Diuji dalam IE, Firefox, dan Chrome.

.parent-container {
    position: relative;
    height:100%;
    width: 100%;
}

.child-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

<div class="parent-container">
    <div class="child-container">
        <h2>Header Text</h2>
        <span>Some Text</span>
    </div>
</div>

Ditemukan di https://css-tricks.com/centering-css-complete-guide/

untuk pusat vertikal bootstrap4 beberapa item

d-flex untuk aturan fleksibel

kolom fleksibel untuk arah vertikal pada item

justify-content-center untuk pemusatan

style = 'height: 300px;' harus memiliki titik setel di mana center dikalk atau menggunakan kelas h-100

kemudian untuk pusat horisontal div d-flex justify-content-center dan beberapa wadah

jadi kami memiliki hierarki 3 tag: div-kolom -> div-row -> div-container

     <div class="d-flex flex-column justify-content-center bg-secondary" 
        style="height: 300px;">
        <div class="d-flex justify-content-center">
           <div class=bg-primary>Flex item</div>
        </div>
        <div class="d-flex justify-content-center">
           <div class=bg-primary>Flex item</div>
        </div>
      </div> 

Jika Anda menggunakan Bootstrap 4, Anda hanya perlu menambahkan 2 div:

.jumbotron{
  height:100%;
  width:100%;
}

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>    
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>

<body>
  <div class="jumbotron">
    <div class="d-table w-100 h-100">
      <div class="d-table-cell w-100 h-100 align-middle">
        <h5>
          your stuff...
        </h5>
        <div class="container">
          <div class="row">
            <div class="col-12">
              <p>
                More stuff...
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>

Kelas-kelas: d-table, d-table-cell, w-100, h-100 dan align-middle akan melakukan pekerjaan

Berikan kelas kontainer

.container{
    height: 100vh;
    width: 100vw;
    display: flex;
}

Berikan div yang ada di dalam wadah:

align-content: center;

Semua konten di dalam div ini akan muncul di tengah halaman.

Berikut adalah cara yang saya gunakan untuk menyelaraskan konten secara vertikal - atas / tengah / bawah dengan 3 baris bootstrap. Bootstrap 3 kolom dengan ketinggian yang sama dan rata secara vertikal.

/* columns of same height styles */

.row-full-height {
  height: 100%;
}
.col-full-height {
  height: 100%;
  vertical-align: middle;
}
.row-same-height {
  display: table;
  width: 100%;
  /* fix overflow */
  table-layout: fixed;
}
.col-xs-height {
  display: table-cell;
  float: none !important;
}

@media (min-width: 768px) {
  .col-sm-height {
    display: table-cell;
    float: none !important;
  }
}
@media (min-width: 992px) {
  .col-md-height {
    display: table-cell;
    float: none !important;
  }
}
@media (min-width: 1200px) {
  .col-lg-height {
    display: table-cell;
    float: none !important;
  }
}
/* vertical alignment styles */

.col-top {
  vertical-align: top;
}
.col-middle {
  vertical-align: middle;
}
.col-bottom {
  vertical-align: bottom;

<div class="container">

<h2>Demo 1</h2>
<div class="row">
  <div class="row-same-height">
    <div class="col-xs-3 col-xs-height">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tempus tincidunt porttitor. Praesent vehicula aliquam enim. Fusce non luctus eros, sit amet consequat velit. Pellentesque volutpat est et est imperdiet pharetra. Integer vestibulum feugiat malesuada. Proin a felis ut libero vestibulum fermentum ut sit amet est. Morbi placerat eget lacus sed sagittis. Nullam eu elit gravida arcu viverra facilisis. Quisque laoreet enim neque, ut consequat sem tincidunt at. Fusce lobortis scelerisque libero, eget vulputate neque. </div>
    <div class="col-xs-3 col-xs-height col-top">2st column</div>
    <div class="col-xs-3 col-xs-height col-middle">3st column</div>
    <div class="col-xs-3 col-xs-height col-bottom">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tempus tincidunt porttitor. Praesent vehicula aliquam enim. Fusce non luctus eros, sit amet consequat velit. Pellentesque volutpat est et est imperdiet pharetra.</div>
  </div>
</div><!-- ./row -->
</div><!-- ./container -->

Ini demo JSFiddle .