Saya menggunakan Twitter Bootstrap 3, dan saya memiliki masalah ketika saya ingin menyelaraskan dua secara vertikal div, misalnya - tautan JSFiddle :

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<div class="row">
  <div class="col-xs-5">
    <div style="height:5em;border:1px solid #000">Big</div>
  </div>
  <div class="col-xs-5">
    <div style="height:3em;border:1px solid #F00">Small</div>
  </div>
</div>

Sistem grid di Bootstrap menggunakan float: left, tidak display:inline-block, sehingga properti vertical-aligntidak berfungsi. Saya mencoba menggunakan margin-topuntuk memperbaikinya, tetapi saya pikir ini bukan solusi yang baik untuk desain responsif.

Jawaban ini menyajikan peretasan, tetapi saya sangat menyarankan Anda untuk menggunakan flexbox (sebagaimana dinyatakan dalam jawaban @Haschem ), karena sekarang telah didukung di mana-mana.

Tautan demo:
- Bootstrap 3
- Bootstrap 4 alpha 6

Anda masih dapat menggunakan kelas khusus saat Anda membutuhkannya:

.vcenter {
    display: inline-block;
    vertical-align: middle;
    float: none;
}

<div class="row">
    <div class="col-xs-5 col-md-3 col-lg-1 vcenter">
        <div style="height:10em;border:1px solid #000">Big</div>
    </div><!--
    --><div class="col-xs-5 col-md-7 col-lg-9 vcenter">
        <div style="height:3em;border:1px solid #F00">Small</div>
    </div>
</div>

Bootply

Menggunakan inline-blockmenambahkan ruang ekstra di antara blok jika Anda membiarkan ruang nyata dalam kode Anda (seperti ...</div> </div>...). Ruang ekstra ini memecah kisi kami jika ukuran kolom menambahkan hingga 12:

<div class="row">
    <div class="col-xs-6 col-md-4 col-lg-2 vcenter">
        <div style="height:10em;border:1px solid #000">Big</div>
    </div>
    <div class="col-xs-6 col-md-8 col-lg-10 vcenter">
        <div style="height:3em;border:1px solid #F00">Small</div>
    </div>
</div>

Di sini, kami memiliki ruang ekstra di antara <div class="[...] col-lg-2">dan <div class="[...] col-lg-10">(carriage return dan 2 tab / 8 spasi). Dan sebagainya...

Ayo tendang ruang ekstra ini !!

<div class="row">
    <div class="col-xs-6 col-md-4 col-lg-2 vcenter">
        <div style="height:10em;border:1px solid #000">Big</div>
    </div><!--
    --><div class="col-xs-6 col-md-8 col-lg-10 vcenter">
        <div style="height:3em;border:1px solid #F00">Small</div>
    </div>
</div>

Perhatikan komentar yang tampaknya tidak berguna <!-- ... -->? Mereka penting - tanpa mereka, spasi putih antara <div>elemen akan mengambil ruang dalam tata letak, memecahkan sistem grid.

Catatan: Bootply telah diperbarui

Tata letak kotak yang fleksibel

Dengan munculnya Kotak Fleksibel CSS , banyak mimpi buruk desainer web ¹ telah teratasi. Salah satu yang paling rumit, penyelarasan vertikal. Sekarang dimungkinkan bahkan di ketinggian yang tidak diketahui .

"Dua dekade retas tata letak akan segera berakhir. Mungkin bukan besok, tapi segera, dan selama sisa hidup kita."

- CSS Legendary Eric Meyer di W3Conf 2013

Kotak Fleksibel (atau singkatnya, Flexbox), adalah sistem tata letak baru yang dirancang khusus untuk keperluan tata letak. The Spesifikasi negara :

Tata letak fleksibel dangkal mirip dengan tata letak blok. Ia tidak memiliki banyak properti teks atau dokumen-sentris yang lebih kompleks yang dapat digunakan dalam tata letak blok, seperti float dan kolom. Sebagai gantinya, ia memperoleh alat sederhana dan kuat untuk mendistribusikan ruang dan menyelaraskan konten dengan cara yang sering dibutuhkan webapps dan laman web kompleks.

Bagaimana ini bisa membantu dalam kasus ini? Baiklah, mari kita lihat.

Kolom selaras vertikal

Menggunakan Twitter Bootstrap kita punya .rowbeberapa .col-*. Yang perlu kita lakukan adalah untuk menampilkan .row^{2 yang} diinginkan sebagai kotak wadah fleksibel dan kemudian sejajarkan semua item fleksibelnya (kolom) secara vertikal berdasarkan align-itemsproperti.

CONTOH DI SINI (Silakan baca komentar dengan hati-hati)

<div class="container">
    <div class="row vertical-align"> <!--
                    ^--  Additional class -->
        <div class="col-xs-6"> ... </div>
        <div class="col-xs-6"> ... </div>
    </div>
</div>

.vertical-align {
    display: flex;
    align-items: center;
}

Hasil

Area berwarna menampilkan kotak kolom.

Mengklarifikasi align-items: center

8.3 Penyelarasan Sumbu Lintas: align-itemsproperti

Benda fleksibel dapat disejajarkan dalam sumbu silang dari garis saat ini dari wadah fleksibel, serupa dengan justify-contenttetapi pada arah tegak lurus. align-itemsmenyetel perataan standar untuk semua item penampung flex, termasuk item flex anonim .

align-items: center; Menurut nilai tengah, kotak margin item fleksibel dipusatkan pada sumbu silang di dalam garis.

Peringatan Besar

Catatan penting # 1: Bootstrap Twitter tidak menentukanwidth kolom di perangkat ekstra kecil kecuali Anda memberikan salah satu .col-xs-#kelas ke kolom.

Karena itu dalam demo khusus ini, saya telah menggunakan .col-xs-* kelas agar kolom ditampilkan dengan benar dalam mode seluler, karena ini menentukan widthkolom secara eksplisit.

Tapi Anda juga bisa mematikan tata letak Flexbox hanya dengan mengubah display: flex;kedisplay: block; dalam ukuran layar tertentu. Contohnya:

/* Extra small devices (767px and down) */
@media (max-width: 767px) {
    .row.vertical-align {
        display: block; /* Turn off the flexible box layout */
    }
}

Atau Anda bisa menentukan .vertical-align hanya pada ukuran layar tertentu seperti:

/* Small devices (tablets, 768px and up) */
@media (min-width: 768px) {
    .row.vertical-align {
        display: flex;
        align-items: center;
    }
}

Dalam hal ini, aku akan pergi dengan @KevinNelson 's pendekatan .

Catatan penting # 2: Awalan vendor dihilangkan karena singkatnya. Sintaks Flexbox telah diubah selama ini. Sintaks tertulis baru tidak akan berfungsi pada versi browser web yang lebih lama (tetapi tidak setua Internet Explorer 9! Flexbox didukung pada Internet Explorer 10 dan yang lebih baru).

Ini berarti Anda juga harus menggunakan properti yang diawali dengan vendor seperti display: -webkit-box dan seterusnya dalam mode produksi.

Jika Anda mengklik "Toggle Compiled View" di Demo , Anda akan melihat versi awalan deklarasi CSS (terima kasih kepada Autoprefixer ).

Kolom tinggi penuh dengan konten selaras vertikal

Seperti yang Anda lihat di demo sebelumnya , kolom (item fleksibel) tidak lagi setinggi wadahnya (kotak kontainer fleksibel. Yaitu.row elemen).

Ini karena menggunakan centernilai untuk align-itemsproperti. Nilai defaultnya adalah stretchagar item dapat mengisi seluruh ketinggian elemen induk.

Untuk memperbaikinya, Anda dapat menambahkan display: flex;ke kolom juga:

CONTOH DI SINI (Sekali lagi, pikirkan komentarnya)

.vertical-align {
  display: flex;
  flex-direction: row;
}

.vertical-align > [class^="col-"],
.vertical-align > [class*=" col-"] {
  display: flex;
  align-items: center;     /* Align the flex-items vertically */
  justify-content: center; /* Optional, to align inner flex-items
                              horizontally within the column  */
}

Hasil

Area berwarna menampilkan kotak kolom.

Terakhir, namun tidak kalah pentingnya , perhatikan bahwa demo dan cuplikan kode di sini dimaksudkan untuk memberi Anda ide yang berbeda, untuk memberikan pendekatan modern untuk mencapai tujuan. Harap perhatikan bagian " Peringatan Besar " jika Anda akan menggunakan pendekatan ini di situs web atau aplikasi dunia nyata.

Untuk bacaan lebih lanjut termasuk dukungan browser, sumber daya ini akan berguna:

• Jaringan Pengembang Mozilla - Kotak fleksibel
• Panduan Untuk Flexbox - Trik CSS
• HTML5Rocks - Flexbox cepat
• SmashingMagazine - Elemen Tengah dengan Flexbox
• Philip Walton - Diselesaikan Oleh Flexbox
• Dapatkah Saya Menggunakan: Modul Tata Letak Kotak Fleksibel

^{1. Sejajarkan gambar secara vertikal di dalam div dengan ketinggian responsif. 2. Lebih baik menggunakan kelas tambahan agar tidak mengubah default Bootstrap Twitter .row.}

Kode di bawah ini berfungsi untuk saya:

.vertical-align {
    display: flex;
    align-items: center;
}

Perbarui 2020

Saya tahu pertanyaan aslinya adalah untuk Bootstrap 3, tetapi sekarang setelah Bootstrap 4 telah dirilis, berikut adalah beberapa panduan terbaru tentang vertikal center.

Penting! Pusat vertikal relatif terhadap ketinggian induk

Jika induk elemen yang Anda coba pusatkan tidak memiliki ketinggian yang ditentukan , tidak ada solusi pemusatan vertikal yang akan berfungsi!

Bootstrap 4

Sekarang karena Bootstrap 4 adalah flexbox secara default, ada banyak pendekatan berbeda untuk penyelarasan vertikal dengan menggunakan: margin otomatis , utilitas flexbox , atau utilitas tampilan bersama dengan utilitas penyelarasan vertikal . Pada awalnya "utilitas penyelarasan vertikal" tampak jelas, tetapi ini hanya bekerja dengan elemen tampilan inline dan tabel. Berikut adalah beberapa opsi pemusatan vertikal Bootstrap 4 ..

1 - Pusat Vertikal Menggunakan Margin Otomatis:

Cara lain untuk memusatkan secara vertikal adalah menggunakan my-auto. Ini akan memusatkan elemen dalam wadahnya. Misalnya, h-100buat baris menjadi tinggi penuh, dan my-autoakan memusatkan col-sm-12kolom secara vertikal .

<div class="row h-100">
    <div class="col-sm-12 my-auto">
        <div class="card card-block w-25">Card</div>
    </div>
</div>

Bootstrap 4 - Pusat vertikal menggunakan Demo margin otomatis

my-auto mewakili margin pada sumbu y vertikal dan setara dengan:

margin-top: auto;
margin-bottom: auto;

2 - Pusat Vertikal dengan Flexbox:

Karena Bootstrap 4 .rowsekarang display:flexAnda cukup menggunakan align-self-centerpada kolom apa saja untuk memusatkan secara vertikal ...

       <div class="row">
           <div class="col-6 align-self-center">
                <div class="card card-block">
                 Center
                </div>
           </div>
           <div class="col-6">
                <div class="card card-inverse card-danger">
                    Taller
                </div>
          </div>
    </div>

atau, gunakan align-items-centerpada keseluruhan .rowuntuk mensejajarkan semua col-*baris secara vertikal ...

       <div class="row align-items-center">
           <div class="col-6">
                <div class="card card-block">
                 Center
                </div>
           </div>
           <div class="col-6">
                <div class="card card-inverse card-danger">
                    Taller
                </div>
          </div>
    </div>

Bootstrap 4 - Demo vertikal ketinggian tengah berbeda

3 - Pusat Vertikal Menggunakan Peralatan Display:

Bootstrap 4 memiliki layar util yang dapat digunakan untuk display:table, display:table-cell, display:inline, dll .. ini dapat digunakan dengan utils vertical alignment untuk inline menyelaraskan, inline-blok atau elemen sel tabel.

<div class="row h-50">
    <div class="col-sm-12 h-100 d-table">
        <div class="card card-block d-table-cell align-middle">
            I am centered vertically
        </div>
    </div>
</div>

Bootstrap 4 - Pusat vertikal menggunakan utils display Demo

Lihat juga: Vertical Align Center di Bootstrap 4

Bootstrap 3

Metode flexbox pada wadah item ke tengah:

.display-flex-center {
    display: flex;
    align-items: center;
}

Ubah metode translateY:

.transform-center-parent {
    position: relative;
    transform-style: preserve-3d;
}

.transform-center {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

Metode tampilan sebaris:

.display-inline-block {
    display: inline;
}
.display-inline-block > div {
    display: inline-block;
    float: none;
    vertical-align: middle;
}

Demo metode pemusatan Bootstrap 3

Coba ini di CSS dari div:

display: table-cell;
vertical-align: middle;

Saya pikir saya akan membagikan "solusi" saya kalau-kalau itu membantu siapa pun yang tidak terbiasa dengan pertanyaan @media sendiri.

Berkat jawaban @ HashemQolami, saya membuat beberapa pertanyaan media yang dapat berfungsi seperti mobile-class sehingga saya bisa menumpuk col- * untuk mobile tetapi menampilkannya secara vertikal di tengah untuk layar yang lebih besar, misalnya

<div class='row row-sm-flex-center'>
    <div class='col-xs-12 col-sm-6'></div>
    <div class='col-xs-12 col-sm-6'></div>
</div>

.

.row-xs-flex-center {
    display:flex;
    align-items:center;
}
@media ( min-width:768px ) {
    .row-sm-flex-center {
        display:flex;
        align-items:center;
    }
}
@media ( min-width: 992px ) {
    .row-md-flex-center {
        display:flex;
        align-items:center;
    }
}
@media ( min-width: 1200px ) {
    .row-lg-flex-center {
        display:flex;
        align-items:center;
    }
}

Tata letak yang lebih rumit yang membutuhkan jumlah kolom berbeda untuk setiap resolusi layar (mis. 2 baris untuk -xs, 3 untuk -sm, dan 4 untuk -md, dll.) Membutuhkan beberapa penyelesaian lanjutan, tetapi untuk halaman sederhana dengan -xs ditumpuk dan -sm dan lebih besar di baris, ini berfungsi dengan baik.

Mengikuti jawaban yang diterima, jika Anda tidak ingin mengkustomisasi markup, untuk pemisahan masalah atau hanya karena Anda menggunakan CMS, solusi berikut berfungsi dengan baik:

.valign {
  font-size: 0;
}

.valign > [class*="col"] {
  display: inline-block;
  float: none;
  font-size: 14px;
  font-size: 1rem;
  vertical-align: middle;
}

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row valign">
   <div class="col-xs-5">
      <div style="height:5em;border:1px solid #000">Big</div>
   </div>
   <div class="col-xs-5">
       <div style="height:3em;border:1px solid #F00">Small</div>
   </div>
 </div>

Batasan di sini adalah bahwa Anda tidak dapat mewarisi ukuran font dari elemen induk karena baris menetapkan ukuran font menjadi 0 untuk menghapus spasi putih.

Saya lebih suka metode ini sesuai dengan David Walsh Vertical center CSS :

.children{
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

Itu transformtidak penting; itu hanya menemukan pusat sedikit lebih akurat. Internet Explorer 8 mungkin sedikit kurang terpusat sebagai hasilnya, tetapi masih tidak buruk - Dapatkah saya menggunakan - Transforms 2d .

Ini solusi saya. Tambahkan saja kelas ini ke konten CSS Anda.

.align-middle {
  display: flex;
  justify-content: center;
  align-items: center;
}

Maka HTML Anda akan terlihat seperti ini:

<div class="col-xs-12 align-middle">
  <div class="col-xs-6" style="background-color:blue;">
    <h3>Item</h3>
    <h3>Item</h3>
  </div>
  <div class="col-xs-6" style="background-color:red;">
    <h3>Item</h3>
  </div>
</div>

.align-middle {
  display: flex;
  justify-content: center;
  align-items: center;
}

<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<!DOCTYPE html>
    <title>Title</title>
  </head>
  <body>
    <div class="container">
      <div class="row">
        <div class="col-xs-12 align-middle">
          <div class="col-xs-6" style="background-color:blue;">
            <h3>Item</h3>
            <h3>Item</h3>
          </div>
          <div class="col-xs-6" style="background-color:red;">
            <h3>Item</h3>
          </div>
        </div>
      </div>
    </div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
  </body>
</html>

Saya hanya melakukan ini dan melakukan apa yang saya inginkan.

.align-middle {
  margin-top: 25%;
  margin-bottom: 25%;
}

Dan sekarang halaman saya terlihat seperti

<div class='container-fluid align-middle'>
    content

 +--------------------------------+
 |                                |
 |  +--------------------------+  |
 |  |                          |  |
 |  |                          |  |
 |  |                          |  |
 |  |                          |  |
 |  |                          |  |
 |  +--------------------------+  |
 |                                |
 +--------------------------------+

Saya benar-benar menemukan kode berikut berfungsi menggunakan Chrome dan bukan peramban lain selain jawaban yang dipilih saat ini:

.v-center {
    display:table!important; height:125px;
}

.v-center div[class*='col-'] {
   display: table-cell!important;
   vertical-align:middle;
   float:none;
}
.v-center img {
   max-height:125px;
}

Tautan Bootply

Anda mungkin perlu mengubah ketinggian (khusus aktif .v-center) dan menghapus / mengubah div div[class*='col-']untuk kebutuhan Anda.

Saya mengalami masalah yang sama. Dalam kasus saya, saya tidak tahu ketinggian wadah luar, tetapi ini adalah bagaimana saya memperbaikinya:

Pertama, atur tinggi untuk elemen htmldan Anda bodysehingga 100%. Ini penting! Tanpa ini, elemen htmldan bodyhanya akan mewarisi ketinggian anak-anak mereka.

html, body {
   height: 100%;
}

Kemudian saya memiliki kelas wadah luar dengan:

.container {
  display: table;
  width: 100%;
  height: 100%; /* For at least Firefox */
  min-height: 100%;
}

Dan terakhir wadah bagian dalam dengan kelas:

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

HTML sesederhana:

<body>
   <div class="container">
     <div class="inner-container">
        <p>Vertically Aligned</p>
     </div>
   </div>
</body>

Ini yang Anda butuhkan untuk menyelaraskan konten secara vertikal. Lihat itu di biola:

Jsfiddle

Tidak perlu meja dan sel tabel. Itu bisa dicapai dengan mudah menggunakan transformasi.

Contoh: http://codepen.io/arvind/pen/QNbwyM

Kode:

.child {
  height: 10em;
  border: 1px solid green;
  position: relative;
}
.child-content {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="row parent">
  <div class="col-xs-6 col-lg-6 child">
    <div class="child-content">
      <div style="height:4em;border:1px solid #000">Big</div>
    </div>
  </div>
  <div class="col-xs-6 col-lg-6 child">
    <div class="child-content">
      <div style="height:3em;border:1px solid #F00">Small</div>
    </div>
  </div>
</div>

Jika Anda menggunakan Less versi Bootstrap, dan mengkompilasi ke dalam CSS sendiri, Anda dapat menggunakan beberapa kelas utilitas untuk digunakan dengan kelas Bootstrap.

Saya telah menemukan ini bekerja dengan sangat baik di mana saya ingin menjaga respon dan konfigurasi dari sistem grid Bootstrap (seperti menggunakan -mdatau-sm ), tapi saya ingin semua kolom dalam baris yang diberikan untuk semua memiliki ketinggian vertikal yang sama (sehingga saya dapat kemudian sejajarkan kontennya secara vertikal dan suruh semua kolom di baris memiliki garis tengah yang sama).

CSS / Kurang:

.display-table {
    display: table;
    width: 100%;
}
.col-md-table-cell {
    @media (min-width: @screen-md-min) {
        display: table-cell;
        vertical-align: top;
        float: none;
    }
}
.col-sm-table-cell {
    @media (min-width: @screen-sm-min) {
        display: table-cell;
        vertical-align: top;
        float: none;
    }
}
.vertical-align-middle {
    vertical-align: middle;
}

HTML:

<div class="row display-table">
    <div class="col-sm-5 col-sm-table-cell vertical-align-middle">
        ...
    </div>
    <div class="col-sm-5 col-sm-table-cell vertical-align-middle">
        ...
    </div>
</div>

Saya menguraikan sedikit tentang jawaban zessx , untuk membuatnya lebih mudah digunakan ketika mencampur ukuran kolom yang berbeda pada ukuran layar yang berbeda.

Jika Anda menggunakan Sass , Anda dapat menambahkan ini ke file scss Anda:

@mixin v-col($prefix, $min-width) {
    @media (min-width: $min-width) {
        .col-#{$prefix}-v {
            display: inline-block;
            vertical-align: middle;
            float: none;
        }
    }
}

@include v-col(lg, $screen-lg);
@include v-col(md, $screen-md);
@include v-col(sm, $screen-sm);
@include v-col(xs, $screen-xs);

Yang menghasilkan CSS berikut (yang dapat Anda gunakan langsung di stylesheet Anda, jika Anda tidak menggunakan Sass):

@media (min-width: 1200px) {
    .col-lg-v {
        display: inline-block;
        vertical-align: middle;
        float: none;
    }
}

@media (min-width: 992px) {
    .col-md-v {
        display: inline-block;
        vertical-align: middle;
        float: none;
    }
}

@media (min-width: 768px) {
    .col-sm-v {
        display: inline-block;
        vertical-align: middle;
        float: none;
    }
}

@media (min-width: 480px) {
    .col-xs-v {
        display: inline-block;
        vertical-align: middle;
        float: none;
    }
}

Sekarang Anda dapat menggunakannya di kolom responsif Anda seperti ini:

<div class="container">
    <div class="row">
        <div class="col-sm-7 col-sm-v col-xs-12">
            <p>
                This content is vertically aligned on tablets and larger. On mobile it will expand to screen width.
            </p>
        </div><div class="col-sm-5 col-sm-v col-xs-12">
            <p>
                This content is vertically aligned on tablets and larger. On mobile it will expand to screen width.
            </p>
        </div>
    </div>
    <div class="row">
        <div class="col-md-7 col-md-v col-sm-12">
            <p>
                This content is vertically aligned on desktops and larger. On tablets and smaller it will expand to screen width.
            </p>
        </div><div class="col-md-5 col-md-v col-sm-12">
            <p>
                This content is vertically aligned on desktops and larger. On tablets and smaller it will expand to screen width.
            </p>
        </div>
    </div>
</div>

Perilaku Flex didukung secara asli sejak Bootstrap 4. Tambahkan d-flex align-items-centerdirow div. Anda tidak perlu lagi memodifikasi konten CSS Anda.

Contoh sederhana: http://jsfiddle.net/vgks6L74/

<!-- language: html -->
<div class="row d-flex align-items-center">
  <div class="col-5 border border-dark" style="height:10em">  Big </div>
  <div class="col-2 border border-danger" style="height:3em"> Small </div>
</div>

Dengan contoh Anda: http://jsfiddle.net/7zwtL702/

<!-- language: html -->
<div class="row d-flex align-items-center">
    <div class="col-5">
        <div class="border border-dark" style="height:10em">Big</div>
    </div>
    <div class="col-2">
        <div class="border border-danger" style="height:3em">Small</div>
   </div>
</div>

Sumber: Flex · Bootstrap

OK, secara tidak sengaja saya telah mencampur beberapa solusi, dan akhirnya berfungsi sekarang untuk tata letak saya di mana saya mencoba membuat tabel 3x3 dengan kolom Bootstrap pada resolusi terkecil.

/* Required styles */

#grid a {
  display: table;
}

#grid a div {
  display: table-cell;
  vertical-align: middle;
  float: none;
}


/* Additional styles for demo: */

body {
  padding: 20px;
}

a {
  height: 40px;
  border: 1px solid #444;
}

a > div {
  width: 100%;
  text-align: center;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<div id="grid" class="clearfix row">
  <a class="col-xs-4 align-center" href="#">
    <div>1</div>
  </a>
  <a class="col-xs-4 align-center" href="#">
    <div>2</div>
  </a>
  <a class="col-xs-4 align-center" href="#">
    <div>3</div>
  </a>
  <a class="col-xs-4 align-center" href="#">
    <div>4</div>
  </a>
  <a class="col-xs-4 align-center" href="#">
    <div>5</div>
  </a>
  <a class="col-xs-4 align-center" href="#">
    <div>6</div>
  </a>
  <a class="col-xs-4 align-center" href="#">
    <div>7</div>
  </a>
  <a class="col-xs-4 align-center" href="#">
    <div>8</div>
  </a>
  <a class="col-xs-4 align-center" href="#">
    <div>9</div>
  </a>
</div>

Coba ini,

.exe {
  font-size: 0;
}

.exe > [class*="col"] {
  display: inline-block;
  float: none;
  font-size: 14px;
  font-size: 1rem;
  vertical-align: middle;
}

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row  exe">
   <div class="col-xs-5">
      <div style="height:5em;border:1px solid grey">Big</div>
   </div>
   <div class="col-xs-5">
       <div style="height:3em;border:1px solid red">Small</div>
   </div>
 </div>

Ada beberapa cara untuk melakukannya:

1. Menggunakan 

   display: table-cell;
   vertical-align: middle;

   dan CSS wadah untuk

   display: table;

2. Gunakan padding bersama dengan layar media untuk mengubah padding relatif terhadap ukuran layar. Layar Google @ media untuk tahu lebih banyak.

3. Gunakan bantalan relatif

   Yaitu, tentukan bantalan dalam hal%

Dengan Bootstrap 4 (yang saat ini dalam alpha) Anda dapat menggunakan .align-items-centerkelas. Jadi Anda dapat menjaga karakter responsif Bootstrap. Langsung bekerja dengan baik untuk saya. Lihat Dokumentasi Bootstrap 4 .

HTML

<div class="row">
    <div class="col-xs-2 pull-bottom"
         style="height:100px;background:blue">
    </div>
    <div class="col-xs-8 pull-bottom"
         style="height:50px;background:yellow">
    </div>
</div>

CSS

.pull-bottom {
    display: inline-block;
    vertical-align: bottom;
    float: none;
}

Saya berlari ke situasi yang sama di mana saya ingin menyelaraskan beberapa elemen div secara vertikal berturut-turut dan menemukan bahwa kelas Bootstrap col-xx-xx menerapkan gaya ke div sebagai float: left.

Saya harus menerapkan style pada elemen div seperti style = "Float: none" dan semua elemen div saya mulai selaras secara vertikal. Berikut ini contoh kerjanya:

<div class="col-lg-4" style="float:none;">

JsFiddle Link

Untuk berjaga-jaga jika seseorang ingin membaca lebih lanjut tentang properti apung:

W3Schools - Float