Ich verwende Twitter Bootstrap 3 und habe Probleme, wenn ich zwei vertikal ausrichten möchte div, zum Beispiel - JSFiddle-Link :

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

Das Rastersystem in Bootstrap verwendet float: leftnicht display:inline-block, daher vertical-alignfunktioniert die Eigenschaft nicht. Ich habe versucht, margin-topdas Problem zu beheben, aber ich denke, dies ist keine gute Lösung für das reaktionsschnelle Design.

Diese Antwort stellt einen Hack dar, aber ich würde Ihnen wärmstens empfehlen, die Flexbox zu verwenden (wie in der Antwort von @Haschem angegeben ), da sie jetzt überall unterstützt wird.

Demos Link:
- Bootstrap 3
- Bootstrap 4 Alpha 6

Sie können eine benutzerdefinierte Klasse weiterhin verwenden, wenn Sie sie benötigen:

.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

Verwenden von inline-block fügt zusätzlichen Platz zwischen Blöcken hinzu, wenn Sie einen realen Platz in Ihrem Code lassen (wie ...</div> </div>...). Dieser zusätzliche Platz bricht unser Raster, wenn die Spaltengröße 12 beträgt:

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

Hier haben wir zusätzliche Zwischenräume <div class="[...] col-lg-2"> und <div class="[...] col-lg-10">(ein Wagenrücklauf und 2 Tabulatoren / 8 Leerzeichen). Und so...

Lassen Sie uns diesen zusätzlichen Raum treten !!

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

Beachten Sie das scheinbar nutzlosen Kommentare <!-- ... -->? Sie sind wichtig - ohne sie nimmt das Leerzeichen zwischen den <div>Elementen Platz im Layout ein und bricht das Rastersystem.

Hinweis: Die Bootply wurde aktualisiert

Flexibles Boxlayout

Mit dem Aufkommen der CSS Flexible Box wurden viele der Albträume ¹ von Webdesignern gelöst. Eine der hackigsten ist die vertikale Ausrichtung. Jetzt ist es auch in unbekannten Höhen möglich .

"Zwei Jahrzehnte Layout-Hacks gehen zu Ende. Vielleicht nicht morgen, aber bald und für den Rest unseres Lebens."

- CSS- Legende Eric Meyer auf der W3Conf 2013

Flexible Box (oder kurz Flexbox) ist ein neues Layoutsystem, das speziell für Layoutzwecke entwickelt wurde. Die Spezifikation besagt :

Das Flex-Layout ähnelt oberflächlich dem Blocklayout. Es fehlen viele der komplexeren text- oder dokumentenzentrierten Eigenschaften, die im Blocklayout verwendet werden können, z. B. Gleitkommazahlen und Spalten. Im Gegenzug erhält es einfache und leistungsstarke Tools zum Verteilen von Speicherplatz und zum Ausrichten von Inhalten auf eine Weise, die Webanwendungen und komplexe Webseiten häufig benötigen.

Wie kann es in diesem Fall helfen? Okay, lass uns nachsehen.

Vertikal ausgerichtete Spalten

Mit Twitter Bootstrap haben wir .roweinige .col-*s. Alles, was wir tun müssen, ist, die gewünschte .row² als Flex-Container- Box anzuzeigen und dann alle Flex-Elemente (die Spalten) vertikal nach align-itemsEigenschaften auszurichten .

BEISPIEL HIER (Bitte lesen Sie die Kommentare sorgfältig durch)

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

Die Ausgabe

Der farbige Bereich zeigt das Auffüllfeld der Spalten an.

Klarstellung auf align-items: center

8.3 Achsenübergreifende Ausrichtung: die align-itemsEigenschaft

Flex-Elemente können in der Querachse der aktuellen Linie des Flex-Containers ausgerichtet werden, ähnlich, justify-contentjedoch in senkrechter Richtung. align-itemsLegt die Standardausrichtung für alle Elemente des Flex-Containers fest, einschließlich anonymer Flex-Elemente .

align-items: center; Nach dem Mittelpunktswert wird das Randfeld des Flex-Elements in der Querachse innerhalb der Linie zentriert .

Großer Alarm

Wichtiger Hinweis Nr. 1: Twitter Bootstrap gibt die Anzahl der widthSpalten in besonders kleinen Geräten nur an, wenn Sie .col-xs-#den Spalten eine der Klassen zuweisen.

Daher habe ich in dieser speziellen Demo .col-xs-*Klassen verwendet, damit Spalten im mobilen Modus ordnungsgemäß angezeigt werden, da sie widthdie Spalte explizit angeben .

Aber alternativ könnte man abschalten die Flexbox einfach Layout , indem display: flex;auf display: block;Größen in bestimmten Bildschirm. Zum Beispiel:

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

Oder Sie können nur bestimmte Bildschirmgrößen wie folgt angeben.vertical-align :

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

In diesem Fall würde ich mit gehen @KevinNelson ‚s Ansatz .

Wichtiger Hinweis Nr. 2: Herstellerpräfixe wurden aus Gründen der Kürze weggelassen. Die Flexbox-Syntax wurde im Laufe der Zeit geändert. Die neue geschriebene Syntax funktioniert nicht mit älteren Versionen von Webbrowsern (aber nicht so alt wie Internet Explorer 9! Flexbox wird in Internet Explorer 10 und höher unterstützt).

Dies bedeutet, dass Sie display: -webkit-boxim Produktionsmodus auch vom Hersteller vorangestellte Eigenschaften wie usw. verwenden sollten.

Wenn Sie in der Demo auf "Kompilierte Ansicht umschalten " klicken , wird die vorangestellte Version der CSS-Deklarationen angezeigt (dank Autoprefixer ).

Spalten voller Höhe mit vertikal ausgerichtetem Inhalt

Wie Sie in der vorherigen Demo sehen , sind die Spalten (die Flex-Elemente) nicht mehr so ​​hoch wie ihr Container (die Flex-Container-Box, dh die.row Element).

Dies liegt an der Verwendung des centerWerts für die align-itemsEigenschaft. Der Standardwert ist stretchso, dass die Elemente die gesamte Höhe des übergeordneten Elements ausfüllen können.

Um dies zu beheben, können Sie auch folgende display: flex;Spalten hinzufügen :

BEISPIEL HIER ( Beachten Sie auch hier die Kommentare)

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

Die Ausgabe

Der farbige Bereich zeigt das Auffüllfeld der Spalten an.

Beachten Sie zu guter Letzt , dass die Demos und Codefragmente hier eine andere Idee vermitteln sollen, um einen modernen Ansatz zur Erreichung des Ziels bereitzustellen. Bitte beachten Sie den Abschnitt " Big Alert ", wenn Sie diesen Ansatz in Websites oder Anwendungen der realen Welt verwenden möchten.

Für die weitere Lektüre einschließlich der Browserunterstützung wären diese Ressourcen hilfreich:

• Mozilla Developer Network - Flexible Boxen
• Leitfaden für Flexbox - CSS-Tricks
• HTML5Rocks - Flexbox schnell
• SmashingMagazine - Zentrieren von Elementen mit Flexbox
• Philip Walton - Gelöst von Flexbox
• Kann ich verwenden: Flexibles Box-Layout-Modul

^{1. Richten Sie ein Bild in einem Div vertikal mit der Reaktionshöhe aus. 2. Verwenden Sie besser eine zusätzliche Klasse, um die Standardeinstellungen von Twitter Bootstrap nicht zu ändern .row.}

Der folgende Code hat bei mir funktioniert:

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

Update 2020

Ich weiß, dass die ursprüngliche Frage für Bootstrap 3 war, aber jetzt, da Bootstrap 4 veröffentlicht wurde, finden Sie hier einige aktualisierte Anleitungen zur vertikalen Mitte.

Wichtig! Die vertikale Mitte ist relativ zur Höhe des Elternteils

Wenn das übergeordnete Element des Elements, das Sie zentrieren möchten, keine definierte Höhe hat , funktioniert keine der vertikalen Zentrierungslösungen!

Bootstrap 4

Nun , da Bootstrap 4 FlexBox standardmäßig gibt es viele verschiedene Ansätze für die vertikale Ausrichtung unter Verwendung von : Auto-Margen , FlexBox utils oder die Anzeige utils zusammen mit vertikalen align utils . Auf den ersten Blick scheint "Vertical Align Utils" offensichtlich, aber diese funktionieren nur mit Inline- und Tabellenanzeigeelementen. Hier sind einige vertikale Zentrierungsoptionen für Bootstrap 4 aufgeführt.

1 - Vertikale Mitte mit automatischen Rändern:

Eine andere Möglichkeit, vertikal zu zentrieren, ist die Verwendung my-auto. Dadurch wird das Element in seinem Container zentriert. Zum Beispiel h-100macht die Zeile die volle Höhe und my-autozentriert die col-sm-12Spalte 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 - Vertikale Mitte mit Auto-Rands- Demo

my-auto stellt Ränder auf der vertikalen y-Achse dar und entspricht:

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

2 - Vertikales Zentrum mit Flexbox:

Da Bootstrap 4 .rowjetzt ist display:flex, können Sie es einfach align-self-centerfür jede Spalte verwenden, um es vertikal zu zentrieren ...

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

oder verwenden Sie align-items-centerinsgesamt .row, um alle col-*in der Reihe vertikal zu zentrieren ...

       <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 - Vertikal zentrierte Spalten mit unterschiedlicher Höhe Demo

3 - Vertikales Zentrum mit Anzeige-Dienstprogrammen:

Bootstrap 4 weist Anzeige utils , die verwendet werden können für display:table, display:table-cell, display:inline, etc .. Diese können mit der verwendet werden , den vertikalen Ausrichtung utils auszurichten inline, inline-Block oder Tabellenzellenelementen.

<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 - Vertikale Mitte mit Display Utils Demo

Siehe auch: Vertical Align Center in Bootstrap 4

Bootstrap 3

Flexbox-Methode für den Container der zu zentrierenden Elemente:

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

Transform translateY-Methode transformieren:

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

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

Inline-Methode anzeigen:

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

Demo der Bootstrap 3-Zentrierungsmethoden

Versuchen Sie dies im CSS des div:

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

Ich dachte, ich würde meine "Lösung" teilen, falls sie jemand anderem hilft, der mit den @ media-Abfragen selbst nicht vertraut ist.

Dank der Antwort von @ HashemQolami habe ich einige Medienabfragen erstellt, die mobil funktionieren wie die col- * -Klassen, sodass ich die col- * für mobile Geräte stapeln und für größere Bildschirme vertikal in der Mitte anzeigen kann, z

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

Kompliziertere Layouts, die eine unterschiedliche Anzahl von Spalten pro Bildschirmauflösung erfordern (z. B. 2 Zeilen für -xs, 3 für -sm und 4 für -md usw.), erfordern eine erweiterte Finagling-Funktion, jedoch für eine einfache Seite mit -xs gestapelt und -sm und größer in Reihen, funktioniert dies gut.

Nach der akzeptierten Antwort funktioniert die folgende Lösung einwandfrei, wenn Sie das Markup nicht anpassen möchten, um Bedenken auszuräumen oder einfach weil Sie ein CMS verwenden:

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

Die Einschränkung besteht darin, dass Sie die Schriftgröße nicht vom übergeordneten Element erben können, da die Zeile die Schriftgröße auf 0 setzt, um Leerzeichen zu entfernen.

Ich bevorzuge diese Methode gemäß David Walsh Vertical Center CSS :

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

Das transformist nicht wesentlich; es findet nur das Zentrum etwas genauer. Internet Explorer 8 ist möglicherweise etwas weniger zentriert, aber es ist immer noch nicht schlecht - Kann ich verwenden - Transforms 2d .

Das ist meine Lösung. Fügen Sie diese Klasse einfach Ihrem CSS-Inhalt hinzu.

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

Dann würde Ihr HTML so aussehen:

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

Ich habe das einfach gemacht und es macht das, was ich will.

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

Und jetzt sieht meine Seite so aus

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

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

Ich finde wirklich, dass der folgende Code mit Chrome und nicht mit anderen Browsern als der aktuell ausgewählten Antwort funktioniert:

.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

Möglicherweise müssen Sie die Höhen (speziell auf .v-center) ändern und div on div[class*='col-']für Ihre Anforderungen entfernen / ändern .

Ich bin auf dasselbe Problem gestoßen. In meinem Fall kannte ich die Höhe des Außenbehälters nicht, aber so habe ich es behoben:

Stellen Sie zuerst die Höhe für Ihre htmlund bodyElemente so ein, dass sie 100% betragen. Das ist wichtig! Ohne dies erben die htmlund body-Elemente einfach die Größe ihrer Kinder.

html, body {
   height: 100%;
}

Dann hatte ich eine äußere Containerklasse mit:

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

Und zum Schluss der innere Container mit Klasse:

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

HTML ist so einfach wie:

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

Dies ist alles, was Sie benötigen, um Inhalte vertikal auszurichten. Probieren Sie es in Geige aus:

Jsfiddle

Es werden keine Tabellen und Tabellenzellen benötigt. Es kann leicht mit Transformation erreicht werden.

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

Code:

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

Wenn Sie die Less- Version von Bootstrap verwenden und selbst in CSS kompilieren, können Sie einige Dienstprogrammklassen für Bootstrap-Klassen verwenden.

Ich habe festgestellt, dass diese hervorragend funktionieren, wenn ich die Reaktionsfähigkeit und Konfigurierbarkeit des Bootstrap-Grid-Systems (wie die Verwendung von -mdoder) beibehalten möchte-sm ) , aber ich möchte, dass alle Spalten in einer bestimmten Zeile dieselbe vertikale Höhe haben (damit ich dies kann) Richten Sie dann ihren Inhalt vertikal aus und lassen Sie alle Spalten in der Zeile eine gemeinsame Mitte haben.

CSS / Less:

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

Ich habe die Antwort von zessx etwas näher erläutert , um die Verwendung beim Mischen verschiedener Spaltengrößen auf verschiedenen Bildschirmgrößen zu vereinfachen.

Wenn Sie Sass verwenden , können Sie dies zu Ihrer scss-Datei hinzufügen:

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

Dadurch wird das folgende CSS generiert (das Sie direkt in Ihren Stylesheets verwenden können, wenn Sie Sass nicht verwenden):

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

Jetzt können Sie es für Ihre Antwortspalten wie folgt verwenden:

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

Flex-Verhaltensweisen werden seit Bootstrap 4 nativ unterstützt. Fügen Sie d-flex align-items-centerdas rowdiv hinzu. Sie müssen Ihren CSS-Inhalt nicht mehr ändern.

Einfaches Beispiel: 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>

Mit Ihrem Beispiel: 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>

Quelle: Flex · Bootstrap

OK, aus Versehen habe ich ein paar Lösungen gemischt und es funktioniert jetzt endlich für mein Layout, in dem ich versucht habe, eine 3x3-Tabelle mit Bootstrap-Spalten mit der kleinsten Auflösung zu erstellen.

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

Versuche dies,

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

Es gibt verschiedene Möglichkeiten, dies zu tun:

1. Verwenden 

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

   und das CSS des Containers zu

   display: table;

2. Verwenden Sie das Auffüllen zusammen mit dem Medienbildschirm, um das Auffüllen relativ zur Bildschirmgröße zu ändern. Google @ media-Bildschirm, um mehr zu erfahren.

3. Verwenden Sie relative Polsterung

   Dh, geben Sie die Auffüllung in% an

Mit Bootstrap 4 (derzeit in Alpha) können Sie die .align-items-centerKlasse verwenden. So können Sie den reaktionsschnellen Charakter von Bootstrap beibehalten. Funktioniert sofort gut für mich. Siehe Bootstrap 4-Dokumentation .

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

Ich bin auf dieselbe Situation gestoßen, in der ich einige div-Elemente vertikal hintereinander ausrichten wollte, und habe festgestellt, dass die Bootstrap-Klassen col-xx-xx den Stil als float: left auf das div anwenden.

Ich musste den Stil auf die div-Elemente wie style = "Float: none" anwenden und alle meine div-Elemente begannen vertikal ausgerichtet. Hier ist das Arbeitsbeispiel:

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

JsFiddle Link

Nur für den Fall, dass jemand mehr über die Eigenschaft float lesen möchte:

W3Schools - Float