Ответ 1

Этот ответ представляет собой взлом, но я настоятельно рекомендую вам использовать flexbox (как указано в ответе @Haschem), поскольку теперь он поддерживается везде.

Демонстрационная ссылка:
- Bootstrap 3
- Бутстрап 4 альфа 6

Вы все еще можете использовать пользовательский класс, когда вам это нужно:

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

Ответ 2

Гибкая компоновка ящиков

С появлением CSS Flexible Box многие кошмары веб-дизайнеров ¹ были решены. Один из самых хакерских - вертикальное выравнивание. Теперь это возможно даже в неизвестных высотах.

"Два десятилетия махинаций заканчиваются. Возможно, не завтра, но скоро, и на всю оставшуюся жизнь".

- CSS Legendary Эрик Майер в W3Conf 2013

Гибкая коробка (или, короче говоря, Flexbox), представляет собой новую систему компоновки, специально предназначенную для компоновки. В спецификации указано:

Макет Flex внешне внешне похож на макет блока. Ему не хватает многих более сложные текстовые или документальные свойства, которые могут быть использованы в блочном макете, таком как поплавки и столбцы. Взамен он получает простоту и мощные инструменты для распределения пространства и выравнивания контента способами что Webapps и сложные веб-страницы часто нуждаются.

Как это может помочь в этом случае? Хорошо, посмотрим.

Вертикальные выровненные столбцы

Используя Twitter Bootstrap, у нас есть .row с некоторыми .col-* s. Все, что нам нужно сделать, это отобразить желаемый .row ² как flex container, а затем выровнять все его flex item (столбцы) по вертикали align-items свойство.

ПРИМЕР ЗДЕСЬ (Пожалуйста, внимательно прочитайте комментарии)

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

Выход

Цветная область отображает колоду столбцов.

Разъяснение на align-items: center

8.3 Поперечное осевое выравнивание: свойство align-items

Элементы Flex можно выровнять по justify-content, но в перпендикулярном направлении. align-items устанавливает выравнивание по умолчанию для всех элементов контейнера flex, включая анонимный flex items.

align-items: center;По значению центра значение поля flex item сосредоточено в поперечной оси в строке.

Большое предупреждение

Важное примечание # 1: Щебетать Bootstrap не указывает столбцы width в дополнительных маленьких устройствах, если вы не дадите один из классов .col-xs-# столбцам.

Поэтому в этой конкретной демонстрации я использовал классы .col-xs-* для правильного отображения столбцов в мобильном режиме, потому что он явно указывает width столбца.

Но в качестве альтернативы вы можете отключить макет Flexbox, просто изменив display: flex; на display: block; в определенных размерах экрана. Например:

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

Или вы могли указать .vertical-align только для определенных размеров экрана:

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

В этом случае я бы пошел с @KevinNelson .

Важное примечание # 2: Префикс поставщика пропущен из-за краткости. Синтаксис Flexbox был изменен за время. Новый письменный синтаксис не будет работать в более старых версиях веб-браузеров (но не тот старый, как Internet Explorer 9! Flexbox поддерживается в Internet Explorer 10 и более поздних версиях).

Это означает, что вы должны также использовать свойства с префиксом поставщика, такие как display: -webkit-box и т.д. в рабочем режиме.

Если вы нажмете "Toggle Compiled View" в Demo, вы увидите префиксную версию объявлений CSS (благодаря Autoprefixer).

Полноразмерные столбцы с вертикальным выровненным содержимым

Как вы видите в предыдущей демонстрации , столбцы (элементы гибкости) уже не так высоки, как их контейнер (поле контейнера flex. т.е. элемент .row).

Это связано с использованием значения center для свойства align-items. Значение по умолчанию stretch, так что элементы могут заполнять всю высоту родительского элемента.

Чтобы исправить это, вы можете добавить display: flex; в столбцы:

ПРИМЕР ЗДЕСЬ (Опять же, обратите внимание на комментарии)

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

Выход

Цветная область отображает колоду столбцов.

Наконец, но не менее важно, обратите внимание на то, что демонстрации и фрагменты кода здесь предназначены для того, чтобы дать вам другую идею, чтобы обеспечить современный подход для достижения цели. Пожалуйста, обратите внимание на раздел Big Alert ", если вы собираетесь использовать этот подход на веб-сайтах или приложениях реального мира.

Для дальнейшего чтения, включая поддержку браузера, эти ресурсы были бы полезны:

• Mozilla Developer Network - гибкие блоки
• Руководство по Flexbox - CSS-трюкам
• HTML5Rocks - Flexbox быстрый
• SmashingMagazine - Центрирование элементов с помощью Flexbox
• Филип Уолтон - Решено Flexbox
• Могу ли я использовать: гибкий модуль компоновки ящиков

^{1. Вертикально выравнивать изображение внутри div с гибкой высотой 2. Лучше использовать дополнительный класс, чтобы не изменять настройки Twitter Bootstrap по умолчанию .row.}

Ответ 3

Следующий код работал у меня:

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

Ответ 4

Попробуйте это в CSS div:

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

Ответ 5

Обновление 2018

Я знаю, что оригинальный вопрос был для Bootstrap 3, но теперь, когда Bootstrap 4 был выпущен, вот некоторые обновленные рекомендации по вертикальному центру.

Важный! Вертикальный центр относительно высоты родителя

Если родительский элемент элемента, который вы пытаетесь отцентрировать, не имеет определенной высоты, ни одно из решений для вертикального центрирования не будет работать!

Bootstrap 4

Теперь, когда Bootstrap 4 является flexbox по умолчанию, существует множество различных подходов к вертикальному выравниванию с использованием: авто-полей, утилит flexbox или утилит отображения вместе с утилитами вертикального выравнивания. Поначалу "утилиты вертикального выравнивания" кажутся очевидными, но они работают только с элементами линейного и табличного отображения. Вот несколько вариантов вертикальной центровки Bootstrap 4:

1 - вертикальный центр с использованием авто полей:

Другой способ вертикального центрирования - использовать my-auto. Это будет центрировать элемент внутри его контейнера. Например, h-100 col-sm-12 высоту строки, а my-auto будет вертикально col-sm-12.

<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 - Вертикальный центр с демонстрацией авто-полей

my-auto представляет поля на вертикальной оси Y и эквивалентно:

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

2 - Вертикальный центр с Flexbox:

Поскольку Bootstrap 4 .row теперь display:flex вы можете просто использовать align-self-center в любом столбце, чтобы вертикально align-self-center его...

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

или используйте align-items-center на всем .row чтобы выровнять по центру вертикально все col-* в ряду...

       <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 - Вертикальный центр колонн разной высоты Демо

3 - Вертикальный центр с использованием утилит дисплея:

Bootstrap 4 имеет утилиты отображения, которые можно использовать для display:table, display:table-cell, display:inline и т.д. Они могут использоваться с утилитами вертикального выравнивания для выравнивания элементов встроенных, встроенных блоков или ячеек таблицы.

<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 - Вертикальный центр с использованием дисплея Demo

См. Также: Центр вертикального выравнивания в Bootstrap 4

Bootstrap 3

Метод Flexbox на контейнере элемента (ов) по центру:

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

Преобразуйте метод перевода:

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

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

Отображать встроенный метод:

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

Демонстрация методов центрирования Bootstrap 3

Ответ 6

В соответствии с принятым ответом, если вы не хотите настраивать разметку, для разделения проблем или просто потому, что используете CMS, следующее решение работает нормально:

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

Ответ 7

Я думал, что поделюсь своим "решением", если он поможет кому-то еще, кто не знаком с самими вопросами @media.

Благодаря ответу @HashemQolami, я построил несколько медиа-запросов, которые будут работать мобильными, например col- * classes, чтобы я мог складывать col * для мобильных устройств, но отображал их по вертикали в центре для больших экранов, например,

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

Более сложные макеты, для которых требуется разное количество столбцов для разрешения экрана (например, 2 строки для -xs, 3 для -sm и 4 для -md и т.д.), потребуют более продвинутого финалирования, но для простой страницы с -xs stacked и -sm и больше в строках, это отлично работает.

Ответ 8

Я предпочитаю этот метод в соответствии с Дэвид Уолш Вертикальный центр CSS:

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

transform не является обязательным; он просто находит центр немного точнее. В результате Internet Explorer 8 может быть немного менее центрирован, но это все же неплохо - Могу ли я использовать - Преобразовывает 2d.

Ответ 9

Это моё решение. Просто добавьте этот класс в ваш контент CSS.

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

Тогда ваш HTML будет выглядеть так:

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

Ответ 10

Я просто сделал это, и он делает то, что я хочу.

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

И теперь моя страница выглядит

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

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

Ответ 11

Я действительно нашел следующие работы кода, используя Chrome, а не другие браузеры, чем текущий выбранный ответ:

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

Ссылка на загрузку

Вам может потребоваться изменить высоту (в частности, на .v-center) и удалить/изменить div на div[class*='col-'] для ваших нужд.

Ответ 12

Я столкнулся с этой проблемой. В моем случае я не знал высоты внешнего контейнера, но именно так я его исправил:

Сначала установите высоту для элементов html и body, чтобы они составляли 100%. Это важно! Без этого элементы html и body просто наследуют высоту их детей.

html, body {
   height: 100%;
}

Тогда у меня был внешний контейнерный класс с:

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

И, наконец, внутренний контейнер с классом:

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

HTML так же просто, как:

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

Это все, что вам нужно для вертикального выравнивания содержимого. Проверьте это в скрипке:

Jsfiddle

Ответ 13

Если вы используете Less версию Bootstrap и самостоятельно компилируете в CSS, вы можете использовать некоторые классы полезности для использования с Начальные классы.

Я нашел, что они работают фантастически хорошо, где я хочу сохранить отзывчивость и настраиваемость сетки Bootstrap (например, используя -md или -sm), но я хочу, чтобы все столбцы в данной строке все имели та же самая вертикальная высота (так что я могу затем вертикально выровнять их содержимое и иметь все столбцы в строке, имеющие общую середину).

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>

Ответ 14

Там нет необходимости для таблицы и таблицы клеток. Это может быть легко достигнуто с помощью преобразования.

Пример: http://codepen.io/arvind/pen/QNbwyM

Код:

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

Ответ 15

Я немного поработал над zessx answer, чтобы упростить его использование при смешивании разных размеров столбцов при разных размерах экрана.

Если вы используете Sass, вы можете добавить это в свой 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);

Что генерирует следующий CSS (который вы можете использовать непосредственно в своих таблицах стилей, если вы не используете 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;
    }
}

Теперь вы можете использовать его в своих динамических столбцах следующим образом:

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

Ответ 16

Хорошо, случайно я смешал несколько решений, и теперь, наконец, это работает для моего макета, где я попытался создать таблицу 3x3 с колонками Bootstrap с наименьшим разрешением.

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

Ответ 17

Поведение Flex изначально поддерживается начиная с Bootstrap 4. Добавьте d-flex align-items-center в row div. Вам больше не нужно изменять свой контент CSS.

Простой пример: 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>

С вашим примером: 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>

Источник: Flex · Bootstrap

Ответ 18

    div{
        border: 1px solid;
    }
    span{
        display: flex;
        align-items: center;
    }
    .col-5{
        width: 100px;
        height: 50px;
        float: left;
        background: red;
    }
    .col-7{
        width: 200px;
        height: 24px;

        float: left;
        background: green;
    }

    <span>
        <div class="col-5">
        </div>
        <div class="col-7"></div>
    </span>

Ответ 19

Есть несколько способов сделать это:

1. использование

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

   и CSS контейнера для

   display: table;
   

2. Используйте отступы вместе с медиа-экраном для изменения отступов относительно размера экрана. Google @media, чтобы узнать больше.

3. Используйте относительный отступ

   Т.е. указать отступы в%

Ответ 20

Попробуйте это,

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

Ответ 21

С помощью Bootstrap 4 (который теперь находится в alpha) вы можете использовать класс .align-items-center. Таким образом, вы можете сохранить отзывчивый характер Bootstrap. Сейчас работает отлично. См. Документация Bootstrap 4.

Ответ 22

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

Ответ 23

Я столкнулся с той же ситуацией, когда мне захотелось выровнять несколько элементов div вертикально подряд и обнаружил, что классы Bootstrap col-xx-xx применяют стиль к div как float: left.

Мне пришлось применить стиль к элементам div, например style = "Float: none", и все мои элементы div начались вертикально. Вот рабочий пример:

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

ссылка JsFiddle

На всякий случай кто-то хочет больше узнать о свойствах float:

W3Schools - Float