Używam Twitter Bootstrap 3 i mam problemy, gdy chcę wyrównać dwa w pionie div, na przykład - link 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>

System siatki w Bootstrap używa , więc float: leftnie display:inline-block, więc właściwość vertical-alignnie działa. Próbowałem margin-topgo naprawić, ale myślę, że nie jest to dobre rozwiązanie dla responsywnego projektu.

Ta odpowiedź przedstawia włamanie, ale zdecydowanie polecam korzystanie z Flexboksa (jak podano w odpowiedzi @Haschem ), ponieważ jest teraz obsługiwany wszędzie.

Link do wersji demonstracyjnej:
- Bootstrap 3
- Bootstrap 4 alfa 6

Nadal możesz użyć niestandardowej klasy, gdy jej potrzebujesz:

.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

Używanie inline-blockdodaje dodatkową przestrzeń między blokami, jeśli pozwalasz na spację w swoim kodzie (jak ...</div> </div>...). Ta dodatkowa przestrzeń łamie naszą siatkę, jeśli rozmiary kolumn sumują się do 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>

Tutaj mamy dodatkowe spacje między <div class="[...] col-lg-2">i <div class="[...] col-lg-10">(powrót karetki i 2 tabulatory / 8 spacji). A więc...

Wykopmy tę dodatkową przestrzeń !!

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

Zauważ pozornie bezużyteczne komentarze <!-- ... -->? Są ważne - bez nich spacja między <div>elementami zajmie miejsce w układzie, niszcząc system siatki.

Uwaga: Bootply został zaktualizowany

Elastyczny układ pudełka

Wraz z pojawieniem się CSS Flexible Box wiele koszmarów ¹ projektantów stron internetowych zostało rozwiązanych. Jeden z najbardziej hackujących, wyrównanie pionowe. Teraz jest to możliwe nawet na nieznanych wysokościach .

„Dwie dekady włamań układowych dobiegają końca. Może nie jutro, ale wkrótce i do końca życia”.

- CSS Legendary Eric Meyer na W3Conf 2013

Flexible Box (lub w skrócie Flexbox) to nowy system układu zaprojektowany specjalnie do celów układu. Te stany specyfikacja :

Układ Flex jest powierzchownie podobny do układu bloków. Brakuje w nim wielu bardziej złożonych właściwości tekstowych lub ukierunkowanych na dokumenty, których można użyć w układzie bloków, takich jak zmiennoprzecinkowe i kolumny. W zamian zyskuje proste i wydajne narzędzia do rozmieszczania przestrzeni i wyrównywania zawartości w sposób, którego często potrzebują aplikacje internetowe i złożone strony internetowe.

Jak może pomóc w tym przypadku? Więc, zobaczmy.

Pionowe kolumny wyrównane

Korzystając z Bootstrap na Twitterze mamy .rowtrochę .col-*s. Wszystko, co musimy zrobić, to wyświetlić żądane .row² jako elastyczne pudełko kontenera , a następnie wyrównać wszystkie jego elementy elastyczne (kolumny) pionowo według align-itemswłaściwości.

PRZYKŁAD TUTAJ (Przeczytaj uważnie komentarze)

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

Wyjście

Kolorowy obszar wyświetla pole wypełnienia kolumn.

Wyjaśnianie w sprawie align-items: center

8.3 Wyrównanie osi: align-itemswłaściwość

Elementy elastyczne można wyrównywać w osi poprzecznej bieżącej linii pojemnika elastycznego, podobnie jak justify-contentw kierunku prostopadłym, ale w tym samym kierunku. align-itemsustawia domyślne wyrównanie dla wszystkich elementów pojemnika Flex, w tym anonimowych elementów Flex .

align-items: center; Według wartości środkowej pole marginesu elementu elastycznego jest wyśrodkowane na osi poprzecznej w linii.

Big Alert

Ważna uwaga # 1: Twitter Bootstrap nie określa widthkolumn w bardzo małych urządzeniach, chyba że podasz jedną z .col-xs-#klas kolumnom.

Dlatego w tym konkretnym pokazie użyłem .col-xs-*klas, aby kolumny były poprawnie wyświetlane w trybie mobilnym, ponieważ widthwyraźnie określa kolumnę.

Ale alternatywnie możesz wyłączyć układ Flexbox, po prostu zmieniając display: flex;na display: block;określone rozmiary ekranu. Na przykład:

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

Lub możesz określić .vertical-align tylko na określonych rozmiarach ekranu, takich jak:

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

W tym przypadku pójdę z @KevinNelson „s podejście .

Ważna uwaga # 2: Prefiksy dostawcy pominięto ze względu na zwięzłość. Składnia Flexbox została zmieniona w tym czasie. Nowa pisemna składnia nie będzie działać na starszych wersjach przeglądarek internetowych (ale nie tak starych jak Internet Explorer 9! Flexbox jest obsługiwany w Internet Explorerze 10 i nowszych).

Oznacza to, że display: -webkit-boxw trybie produkcyjnym należy również używać właściwości z prefiksem dostawcy, takich jak itd.

Jeśli klikniesz „Przełącz widok kompilowany” w Demo , zobaczysz prefiksowaną wersję deklaracji CSS (dzięki Autoprefixer ).

Kolumny o pełnej wysokości z wyrównaną w pionie treścią

Jak widać w poprzedniej wersji demonstracyjnej , kolumny (elementy Flex) nie są już tak wysokie jak ich kontener (pole Flex Container, tzn. .rowElement).

Wynika to z używania centerwartości align-itemswłaściwości. Wartość domyślna jest stretchtaka, że ​​elementy mogą wypełnić całą wysokość elementu nadrzędnego.

Aby to naprawić, możesz również dodać display: flex;do kolumn:

PRZYKŁAD TUTAJ (ponownie, pamiętaj o komentarzach)

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

Wyjście

Kolorowy obszar wyświetla pole wypełnienia kolumn.

Na koniec zauważ, że prezentacje i fragmenty kodu mają na celu dać ci inny pomysł i zapewnić nowoczesne podejście do osiągnięcia celu. Jeśli zamierzasz stosować to podejście w witrynach i aplikacjach z prawdziwego świata, pamiętaj o sekcji „ Big Alert ”.

Przydałoby się to do dalszej lektury, w tym do obsługi przeglądarki, te zasoby:

• Mozilla Developer Network - Elastyczne skrzynki
• Przewodnik po Flexbox - sztuczki CSS
• HTML5Rocks - Flexbox szybki
• SmashingMagazine - Elementy centrujące z Flexbox
• Philip Walton - rozwiązany przez Flexbox
• Czy mogę używać: moduł elastycznego układu pól

^{1. Wyrównaj obraz w pionie w pionie z responsywną wysokością. 2. Lepiej jest użyć dodatkowej klasy, aby nie zmieniać domyślnych ustawień Bootstrap na Twitterze .row.}

Poniższy kod działał dla mnie:

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

Aktualizacja 2020

Wiem, że pierwotne pytanie dotyczyło Bootstrap 3, ale teraz, gdy Bootstrap 4 został wydany, oto kilka zaktualizowanych wskazówek dotyczących pionowego środka.

Ważny! Środek pionowy odnosi się do wysokości rodzica

Jeśli element nadrzędny elementu, który próbujesz wyśrodkować, nie ma określonej wysokości , żadne z rozwiązań centrowania pionowego nie będzie działać!

Bootstrap 4

Teraz, gdy Bootstrap 4 jest domyślnie Flexbox, istnieje wiele różnych podejść do wyrównania w pionie za pomocą: auto-marginesów , narzędzi flexbox lub narzędzi do wyświetlania wraz z narzędziami do wyrównywania w pionie . Na początku „narzędzia do wyrównywania w pionie” wydają się oczywiste, ale działają one tylko z elementami wyświetlania w wierszu i tabeli. Oto niektóre opcje centrowania pionowego Bootstrap 4.

1 - Środek pionowy przy użyciu automatycznych marginesów:

Innym sposobem na wyśrodkowanie w pionie jest użycie my-auto. Spowoduje to wyśrodkowanie elementu w jego kontenerze. Na przykład ustawia h-100wiersz na pełną wysokość i my-autowyśrodkuje col-sm-12kolumnę pionowo .

<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 - Pionowe centrum z wykorzystaniem automatycznego marginesu Demo

my-auto reprezentuje marginesy na pionowej osi y i jest równoważny:

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

2 - Centrum pionowe z Flexbox:

Ponieważ Bootstrap 4 .rowjest teraz display:flex, możesz po prostu użyć align-self-centerdowolnej kolumny, aby wyśrodkować ją pionowo ...

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

lub użyj align-items-centercałości, .rowaby wyśrodkować w pionie wszystkie col-*w rzędzie ...

       <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 - Pionowe kolumny o różnych wysokościach w środku Demo

3 - Środek pionowy za pomocą wyświetlaczy:

Bootstrap 4 ma narzędzi z ekranu , który może być używany do display:table, display:table-cell, display:inline, etc .. Mogą one być stosowane z pionowych utils wyrównanie , aby wyrównać inline inline bloku lub elementy komórka tabeli.

<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 - Środek pionowy za pomocą narzędzi wyświetlających Demo

Zobacz także: Vertical Align Center w Bootstrap 4

Bootstrap 3

Metoda Flexbox na kontenerze przedmiotu (ów), aby wyśrodkować:

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

Przekształć metodę translateY:

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

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

Wyświetl metodę wbudowaną:

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

Demonstracja metod centrowania Bootstrap 3

Wypróbuj to w CSS div:

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

Pomyślałem, że podzielę się moim „rozwiązaniem” na wypadek, gdyby pomógł każdemu, kto nie jest zaznajomiony z samym zapytaniem @media.

Dzięki odpowiedzi @ HashemQolami zbudowałem kilka zapytań o media, które działałyby mobilnie jak klasy col- *, tak że mogłem układać col- * dla urządzeń mobilnych, ale wyświetlać je pionowo w środku dla większych ekranów, np.

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

Bardziej skomplikowane układy, które wymagają innej liczby kolumn na rozdzielczość ekranu (np. 2 rzędy dla -xs, 3 dla -sm i 4 dla -md itp.) Wymagałyby bardziej zaawansowanego finaglingu, ale dla prostej strony z -xs ułożone i -sm i większe w rzędach, to działa dobrze.

Po zaakceptowaniu odpowiedzi, jeśli nie chcesz dostosowywać znaczników, w celu rozdzielenia problemów lub po prostu dlatego, że korzystasz z CMS, następujące rozwiązanie działa dobrze:

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

Ograniczeniem jest tutaj to, że nie można dziedziczyć rozmiaru czcionki z elementu nadrzędnego, ponieważ wiersz ustawia rozmiar czcionki na 0 w celu usunięcia białych znaków.

Wolę tę metodę zgodnie z Davidem Walsh Vertical Center CSS :

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

To transformnie jest konieczne; po prostu znajduje centrum nieco dokładniej. W rezultacie Internet Explorer 8 może być nieco mniej wyśrodkowany, ale nadal nie jest zły - czy mogę go użyć - przekształca 2d .

To jest moje rozwiązanie. Po prostu dodaj tę klasę do treści CSS.

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

Wtedy twój HTML wyglądałby tak:

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

Właśnie to zrobiłem i robi to, co chcę.

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

A teraz wygląda moja strona

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

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

Naprawdę uważam, że następujący kod działa w przeglądarce Chrome i nie w innych przeglądarkach niż aktualnie wybrana odpowiedź:

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

Bootply Link

Konieczne może być dostosowanie wysokości (szczególnie włączenie .v-center) i usunięcie / zmiana div div[class*='col-']dla własnych potrzeb.

Natrafiłem na ten sam problem. W moim przypadku nie znałem wysokości zewnętrznego pojemnika, ale tak to naprawiłem:

Najpierw ustaw wysokość dla siebie htmli bodyelementów, aby były w 100%. To jest ważne! Bez tego, htmla bodyelementy po prostu odziedziczyć wysokość swoich dzieci.

html, body {
   height: 100%;
}

Potem miałem klasę kontenerów zewnętrznych z:

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

I wreszcie pojemnik wewnętrzny z klasą:

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

HTML jest tak prosty jak:

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

To wszystko, czego potrzebujesz, aby wyrównać zawartość w pionie. Sprawdź to w skrzypcach:

Jsfiddle

Tabela i komórki nie są potrzebne. Można to łatwo osiągnąć za pomocą transformacji.

Przykład: http://codepen.io/arvind/pen/QNbwyM

Kod:

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

Jeśli korzystasz z Less wersji Bootstrap i sam kompilujesz się w CSS, możesz użyć niektórych klas narzędzi do użycia z klasami Bootstrap.

Uważam, że działają one fantastycznie dobrze tam, gdzie chcę zachować szybkość reakcji i konfigurowalność systemu siatki Bootstrap (np. Przy użyciu -mdlub-sm ), ale chcę, aby wszystkie kolumny w danym rzędzie miały tę samą wysokość pionową (dzięki czemu mogę następnie wyrównaj ich zawartość w pionie, aby wszystkie kolumny w wierszu miały wspólny środek).

CSS / Mniej:

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

Trochę rozwinąłem odpowiedź Zessx , aby ułatwić jej użycie podczas mieszania różnych rozmiarów kolumn na różnych rozmiarach ekranu.

Jeśli używasz Sassa , możesz dodać to do pliku scss:

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

Który generuje następujący CSS (którego możesz użyć bezpośrednio w arkuszach stylów, jeśli nie używasz 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;
    }
}

Teraz możesz go używać w swoich elastycznych kolumnach w następujący sposób:

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

Zachowania Flex są natywnie obsługiwane od Bootstrap 4. Dodać d-flex align-items-centerwrow div. Nie musisz już modyfikować treści CSS.

Prosty przykład: 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>

Na przykład: 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>

Źródło: Flex · Bootstrap

OK, przypadkowo wymieszałem kilka rozwiązań i wreszcie działa teraz dla mojego układu, w którym próbowałem stworzyć tabelę 3x3 z kolumnami Bootstrap w najmniejszej rozdzielczości.

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

Spróbuj tego,

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

Można to zrobić na kilka sposobów:

1. Posługiwać się 

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

   oraz CSS kontenera do

   display: table;

2. Użyj wypełnienia wraz z ekranem multimediów, aby zmienić wypełnienie w stosunku do rozmiaru ekranu. Google @media screen, aby dowiedzieć się więcej.

3. Użyj względnego wypełnienia

   Tj. Określ wypełnienie w%

Z Bootstrap 4 (który jest obecnie w wersji alfa) możesz używać tej .align-items-centerklasy. Możesz więc zachować responsywny charakter Bootstrap. Działa od razu dobrze dla mnie. Zobacz dokumentację 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;
}

Natrafiłem na tę samą sytuację, w której chciałem wyrównać kilka elementów div pionowo w rzędzie i stwierdziłem, że klasy Bootstrap col-xx-xx stosują styl do div jako float: left.

Musiałem zastosować styl do elementów div, takich jak style = "Float: none", a wszystkie moje elementy div zaczęły być wyrównane w pionie. Oto działający przykład:

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

JsFiddle Link

Na wypadek, gdyby ktoś chciał przeczytać więcej na temat właściwości float:

W3Schools - Float