Cara vertikal pusat wadah di Bootstrap?

I'm mencari cara untuk secara vertikal pusat wadah div di dalam jumbotron dan meletakkannya di tengah-tengah halaman.

The .jumbotron harus disesuaikan dengan tinggi dan lebar layar. The .wadah div memiliki lebar 1025px dan harus berada di tengah-tengah halaman (vertikal pusat).

Saya ingin halaman ini untuk memiliki jumbotron disesuaikan dengan tinggi dan lebar layar bersama dengan wadah secara vertikal pusat ke jumbotron. Bagaimana saya bisa mencapai itu?

.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>
TylerH
Pertanyaan edit 26 September 2019 в 2:47
Pemrograman
html css twitter-bootstrap-3 twitter-bootstrap vertical-alignment
5 Maret 2014 в 11:36
73 tayangan
Mengomentari pertanyaan (2)
Larutan

Fleksibel kotak cara

Vertikal keselarasan sekarang sangat sederhana dengan menggunakan Fleksibel tata letak kotak. Saat ini, metode ini didukung dalam berbagai web browser kecuali Internet Explorer 8 & 9. Oleh karena itu kita'd perlu menggunakan beberapa hacks/polyfills atau pendekatan untuk IE8/9.

Berikut ini saya'akan menunjukkan kepada anda bagaimana untuk melakukan itu hanya dalam 3 teks (terlepas dari old flexbox sintaks).

Catatan: it's baik untuk menggunakan kelas tambahan, bukan mengubah .jumbotron untuk mencapai keselarasan vertikal. I'd gunakan vertikal-pusat nama kelas misalnya.

[Contoh][5] (A Cermin pada jsbin).

<div class="jumbotron vertical-center"> 
  <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;
}

Penting catatan (Dianggap dalam demo):

  1. A persentase nilai-nilai dari tinggi atau min-height properties adalah relatif terhadap tinggi dari elemen induk, oleh karena itu anda harus menentukan tinggi dari orang tua secara eksplisit.

  2. Vendor diawali / old flexbox sintaks dihilangkan dalam memposting cuplikan akibat singkatnya, tapi ada di online contoh.

  3. Di beberapa lama web browser seperti Firefox 9 (di mana I've diuji), wadah flex - .vertikal-center dalam hal ini - won't mengambil ruang yang tersedia di dalam orang tua, oleh karena itu kita perlu menentukan lebar properti seperti: width: 100%.

  4. Juga di beberapa web browser seperti disebutkan di atas, flex item - .wadah dalam hal ini - mungkin tidak muncul di tengah secara horizontal. Tampaknya diterapkan kiri/kanan margin dari auto doesn't memiliki efek pada flex item. Oleh karena itu kita perlu menyelaraskan dengan kotak-pack / membenarkan-content.

Untuk rincian lebih lanjut dan/atau vertikal keselarasan kolom, anda bisa merujuk ke topik di bawah ini:

Cara tradisional untuk warisan web browser

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

Di inline flow, inline level element dapat disesuaikan secara vertikal ke tengah oleh vertical-align: middle deklarasi. Spec dari W3C:

tengah Menyelaraskan vertikal titik tengah dari kotak dengan dasar dari orang tua box ditambah setengah x-tinggi dari orang tua.

Dalam kasus bahwa orang tua .vertikal-pusat elemen dalam hal ini - telah eksplisit tinggi, ada kemungkinan jika kita bisa memiliki seorang anak memiliki elemen yang sama persis tinggi dari orang tua, kita akan dapat untuk bergerak dasar orang tua untuk titik tengah tinggi penuh anak dan anehnya membuat kami yang diinginkan di aliran anak -.wadah - blok ke pusat secara vertikal.

Untuk mendapatkan semua bersama-sama

Bahwa menjadi kata, kita bisa membuat sebuah full-height elemen dalam .vertikal-pusat oleh ::sebelum atau ::setelah pseudo elemen dan juga mengubah default display jenis dan anak,.container untuk inline-block.

Kemudian menggunakan vertical-align: middle; untuk menyelaraskan inline elemen vertikal.

Di sini anda pergi:

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

Juga, untuk mencegah masalah tak terduga dalam tambahan layar kecil, anda dapat mengatur ulang ketinggian pseudo-elemen untuk auto atau 0 atau mengubah display jenis tidak jika diperlukan sehingga:

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

UPDATED DEMO

Dan satu hal lagi:

Jika ada footer/header bagian di sekitar kontainer, it's baik untuk posisi bahwa unsur-unsur dengan benar (relatif, mutlak? terserah anda). dan menambahkan lebih tinggi z-index nilai (jaminan) untuk menjaga mereka selalu di atas orang lain.

Community
Jawaban edit 23 Mei 2017 в 12:26
Komentar (2)

Update 2019

Bootstrap 4 termasuk flexbox, sehingga metode centering vertikal jauh lebih mudah dan doesn't membutuhkan tambahan CSS.

Hanya menggunakan d-flex dan menyelaraskan item-pusat kelas utilitas..

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

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

Penting: centering Vertikal adalah relatif tinggi. Wadah induk dari item yang anda're berusaha untuk pusat harus memiliki didefinisikan tinggi. Jika anda ingin puncak halaman menggunakan vh-100 atau min-vh-100 pada orangtua! Misalnya:

<div class="jumbotron d-flex align-items-center min-vh-100">
  <div class="container text-center">
    I am centered vertically
  </div>
</div>
Juga melihat: https://stackoverflow.com/questions/42252443/vertical-align-center-in-bootstrap-4
Zim
Jawaban edit 26 September 2019 в 3:00
Komentar (0)

menambahkan Bootstrap.css kemudian tambahkan ini ke css anda

Ini Adalah Css

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

Sekarang panggilan di halaman anda 

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

Di Bootstrap 4:

untuk pusat anak horizontal, menggunakan bootstrap-4 kelas:

justify-content-center

untuk pusat anak vertikal, menggunakan bootstrap-4 kelas:

 align-items-center

tapi ingat don't lupa untuk menggunakan d-flex kelas ini it's bootstrap-4 kelas utilitas, seperti

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

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

Aku tahu itu's tidak langsung menjawab pertanyaan ini tetapi dapat membantu seseorang

Komentar (1)

Saya disukai teknik :

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

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

Demo


<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></span>
            <p><strong>Redirect</strong><br>Visitors where they converts more.</p>
          </li>
          <li>
            <span></span>
            <p><strong>Track</strong><br>Views, Clicks and Conversions.</p>
          </li>
          <li>
            <span></span>
            <p><strong>Check</strong><br>Constantly the status of your links.</p>
          </li>
          <li>
            <span></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>
body {
  display: table;
  position: absolute;
  height: 100%;
  width: 100%;
}

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

Lihat juga [ini Biola][1]!

John Slegers
Jawaban edit 19 Mei 2016 в 11:26
Komentar (0)

Diuji di 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 pada https://css-tricks.com/centering-css-complete-guide/

TylerH
Jawaban edit 26 September 2019 в 2:48
Komentar (0)

untuk bootstrap4 vertikal pusat dari beberapa item

d-flex untuk flex aturan

flex-kolom untuk arah vertikal pada item

membenarkan-content-pusat untuk centering

style='height: 300px;' harus memiliki untuk mengatur titik-titik di mana menjadi pusat calc atau gunakan h-100 kelas

kemudian untuk horizontal center div d-flex membenarkan-content-pusat dan beberapa wadah

jadi kita memiliki hierarhy 3 tag: div-kolom -> div baris -> div-wadah

     <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>
Komentar (2)

Jika anda're menggunakan Bootstrap 4, anda hanya perlu menambahkan 2 divs:

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



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

Kelas: d-tabel, d-meja-sel, w-100, h-100 dan menyelaraskan-tengah akan melakukan pekerjaan

Komentar (0)

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

/* 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>
</div>

Berikut ini adalah [JSFiddle][1] demo.

TylerH
Jawaban edit 26 September 2019 в 2:50
Komentar (0)