Предпочтительным методом центрирования столбцов является использование "смещений" (то есть: col-md-offset-3)

Bootstrap 3.x примеры центрирования

Для центрирующих элементов существует класс помощников center-block.

Вы также можете использовать text-center чтобы центрировать текст (и встроенные элементы).

Демо: http://bootply.com/91632

РЕДАКТИРОВАТЬ - Как упоминалось в комментариях, center-block работает с содержимым столбца и display:block элементы display:block, но не работает с самим столбцом (col-*), потому что Bootstrap использует float.

Обновление 2018

Теперь с Bootstrap 4 методы центрирования изменились.

• text-center все еще используется для display:inline элементы
• mx-auto заменяет center-block на центральный display:block элементы display:block
• offset-* или mx-auto можно использовать для offset-* столбцов сетки

mx-auto (авто поля оси x) будет display:block центру display:block или display:flex элементы с определенной шириной (%, vw, px и т.д.). Flexbox используется по умолчанию в столбцах сетки, поэтому существуют также различные методы центрирования flexbox.

Demo Bootstrap 4 Горизонтальное центрирование

Для вертикального центрирования в BS4 см. https://stackoverflow.com/questions/41265182/vertical-alignment-in-bootstrap-4

Теперь Bootstrap 3.1.1 работает с .center-block, и этот вспомогательный класс работает с системой столбцов.

Bootstrap 3 Центр класса помощников.

Пожалуйста, проверьте этот jsfiddle DEMO:

<div class="container">
    <div class="row">
        <div class="center-block">row center-block</div>
    </div>
    <div class="row">
        <div class="col-md-6 brd">
            <div class="center-block">1 center-block</div>
        </div>
        <div class="col-md-6 brd">
            <div class="center-block">2 center-block</div>
        </div>
    </div>
</div>
<div class="row">
    <div class="col-xs-2 col-center-block">row col-xs-2 col-center-block</div>
</div>

Центр столбцов столбцов с помощью col-center-block вспомогательного класса.

.col-center-block {
    float: none;
    display: block;
    margin: 0 auto;
    /* margin-left: auto; margin-right: auto; */
}

Просто добавьте это в свой собственный CSS файл, отредактируйте файлы Bootstrap CSS напрямую не рекомендуется и отменяйте свою способность использовать cdn.

.center-block {
    float: none !important
}

Почему?

Bootstrap CSS (Вер. 3.7 и ниже) использует: margin: 0 auto;, но он переопределяется свойством float контейнера размера.

PS: После добавления этого класса не забудьте установить классы по правильному порядку.

<div class="col-md-6 center-block">Example</div>

Bootstrap 3 теперь имеет встроенный класс для этого .center-block

.center-block {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

Если вы все еще используете 2.X, просто добавьте это в свой CSS.

Мой подход к столбцам центра состоит в использовании display: inline-block для столбцов и text-align: center для родителя контейнера.

Вам просто нужно добавить класс CSS по центру к row.

HTML:

<div class="container-fluid">
  <div class="row centered">
    <div class="col-sm-4 col-md-4">
        Col 1
    </div>
    <div class="col-sm-4 col-md-4">
        Col 2
    </div>
    <div class="col-sm-4 col-md-4">
        Col 3
    </div>
  </div>
</div>

CSS

.centered {
   text-align: center;
   font-size: 0;
}
.centered > div {
   float: none;
   display: inline-block;
   text-align: left;
   font-size: 13px;
}

JSfiddle: http://jsfiddle.net/steyffi/ug4fzcjd/

Bootstrap версия 3 имеет класс .text-center.

Просто добавьте этот класс:

text-center

Он просто загрузит этот стиль:

.text-center {
    text-align: center;
}

Пример:

<div class="container-fluid">
  <div class="row text-center">
     <div class="col-md-12">
          Bootstrap 4 is coming....
      </div>
  </div>
</div>   

В Bootstrap v4 это можно сделать, просто добавив .justify-content-center к .row <div>

<div class="row justify-content-center">
    <div class="col-1">centered 1 column</div>
</div>

https://getbootstrap.com/docs/4.0/utilities/flex/#justify-content

Это работает. Возможно, это хакерский способ, но он работает хорошо. Он был протестирован для реагирования (Y).

.centered {
    background-color: teal;
    text-align: center;
}

Просто установите один столбец, который отображает содержимое в col-xs-12 (mobile-first;-) и настройте контейнер только для управления тем, насколько вам нужен ваш центрированный контент, поэтому:

.container {
  background-color: blue;
}
.centered {
    background-color: red;
}

<body class="container col-xs-offset-3 col-xs-6">
    <div class="col-xs-12 centered">
        <img data-src="holder.js/100x100" alt="" />
    </div>
</body>

<body class="container col-xs-offset-1 col-xs-10">
    <div class="col-xs-12 centered">
        <img data-src="holder.js/100x100" alt="" />
    </div>
</body>

Для демонстрации см. http://codepen.io/Kebten/pen/gpRNMe: -)

Вы можете использовать text-center для строки и убедиться, что внутренние divs имеют display:inline-block (с не float)

как:

<div class="container">
    <div class="row text-center" style="background-color : black;">
        <div class="redBlock">A red block</div>
        <div class="whiteBlock">A white block</div>
        <div class="yellowBlock">A yellow block</div>
    </div>
</div>

и css:

.redBlock {
    width: 100px;
    height: 100px;
    background-color: aqua;
    display: inline-block
}
.whiteBlock {
    width: 100px;
    height: 100px;
    background-color: white;
    display: inline-block
}
.yellowBlock {
    width: 100px;
    height: 100px;
    background-color: yellow;
    display: inline-block
}

Скрипка: http://jsfiddle.net/DTcHh/3177/

<div class="container-fluid">
    <div class="row">
        <div class="col-lg-4 col-lg-offset-4">
            <img src="some.jpg">
        </div>
    </div>
</div>

Это, вероятно, не лучший ответ, но есть еще одно творческое решение. Как указано koala_dev, коррекция столбцов работает только для четных размеров столбцов. Однако при вложенности строк вы можете также центрировать неравномерные столбцы.

Вставить исходный вопрос, где вы хотите центрировать столбец из 1 внутри сетки 12.

• Центрировать столбец из 2, смещая его 5
• Создайте вложенную строку, чтобы вы получили новые 12 столбцов внутри двух столбцов.
• Поскольку вы хотите центрировать столбец из 1, а 1 - "половина" из 2 (что мы сосредоточили на шаге 1), теперь вам нужно центрировать столбец из 6 в вашей вложенной строке, что легко сделать путем смещения это 3.

Например:

<div class="container">
  <div class="row">
    <div class="col-md-offset-5 col-md-2">
      <div class="row">
        <div class="col-md-offset-3 col-md-6">
          centered column with that has an "original width" of 1 col
        </div>
      </div>
    </div>
  </div>
</div>

Смотрите эту скрипту, обратите внимание, что вам нужно увеличить размер окна вывода, чтобы увидеть результат, иначе столбцы будут завернуть.

Другой подход смещения состоит в том, чтобы иметь две пустые строки, например:

<div class="col-md-4"></div>
<div class="col-md-4">Centered Content</div>
<div class="col-md-4"></div>

Чтобы центрировать код, нам нужно использовать приведенный ниже код. cols являются элементами float, кроме margin auto. Мы также установим его для float none,

<body class="container">
    <div class="col-lg-1 col-md-4 centered">
        <img data-src="holder.js/100x100" alt="" />
    </div>
</body>

Чтобы центрировать вышеуказанный col-lg-1 с классом с центром, мы напишем:

.centered {
    float: none;
    margin-left: auto;
    margin-right: auto;
}

Чтобы центрировать содержимое внутри div, используйте text-align:center,

.centered {
    text-align: center;
}

Если вы хотите сосредоточить его только на рабочем столе и увеличенном экране, а не на мобильном телефоне, используйте следующий медиа-запрос.

@media (min-width: 768px) {
    .centered {
        float: none;
        margin-left: auto;
        margin-right: auto;
    }
}

И чтобы центрировать div только на мобильной версии, используйте приведенный ниже код.

@media (max-width: 768px) {
    .centered {
        float: none;
        margin-left: auto;
        margin-right: auto;
    }
}

Мы можем достичь этого, используя механизм разметки таблицы:

Механизм:

1. Оберните все столбцы в один div.
2. Сделайте этот div в виде таблицы с фиксированной разметкой.
3. Сделайте каждый столбец ячейкой таблицы.
4. Используйте свойство вертикального выравнивания для управления позицией содержимого.

Пример демо здесь

Это не мой код, но он отлично работает (проверено на Bootstrap 3), и мне не нужно возиться с col-offset.

Демо - версия:

/* centered columns styles */

.row-centered {
  text-align: center;
}

.col-centered {
  display: inline-block;
  float: none;
  /* reset the text-align */
  text-align: left;
  /* inline-block space fix */
  margin-right: -4px;
  text-align: center;
  background-color: #ccc;
  border: 1px solid #ddd;
}

<div class="container">
  <div class="row row-centered">
    <div class="col-xs-6 col-centered">Column 6</div>
    <div class="col-xs-6 col-centered">Column 6</div>
    <div class="col-xs-3 col-centered">Column 3</div>
    <div class="col-xs-3 col-centered">Column 3</div>
    <div class="col-xs-3 col-centered">Column 3</div>
  </div>
</div>

Вы можете использовать очень гибкое решение flexbox для вашей Bootstrap.

justify-content: center;

может центрировать вашу колонку.

Проверьте flex.

Поскольку koala_dev используется в своем подходе 1, я предпочел бы метод смещения вместо центрального блока или полей, который имеет ограниченное использование, но, как он упомянул:

Теперь существует очевидный недостаток этого метода, он работает только для четных размеров столбцов, поэтому только .col-X-2,.col-X-4, col-X-6, col-X-8 и col Поддерживаются -X-10.

Это можно решить, используя следующий подход для нечетных столбцов.

<div class="col-xs-offset-5 col-xs-2">
    <div class="col-xs-offset-3">
        // Your content here
    </div>
</div>

Попробуйте этот код.

<body class="container">
<div class="col-lg-1 col-lg-offset-10">
    <img data-src="holder.js/100x100" alt="" />
</div>

Здесь я использовал col-lg-1, и смещение должно быть 10 для правильного центрирования div на больших устройствах, если вам нужно, чтобы он центрировался на mediam для большого устройства, тогда просто измените lg на md и так далее, дайте мне знать если есть проблема

Чтобы центрировать более одного столбца в строке Bootstrap - и количество cols нечетно, просто добавьте этот класс css ко всем столбцам в этой строке:

.many-cols-centered {  // To horizontally center bootstrap odd cols, eg col-lg-9, col-md-3, works well in lg
  display:inline-block;
  float:none;
}

Итак, в вашем HTML есть что-то вроде:

<div class="row text-center"> <!-- text-center centers all text in that row -->
    <div class="col-lg-3 col-md-3 col-sm-3 col-xs-12 many-cols-centered">
        <img src='assets/image1.jpg'>
        <h3>You See</h3>
        <p>I love coding.</p>
    </div>
    <div class="col-lg-3 col-md-3 col-sm-3 col-xs-12 many-cols-centered">
        <img src='assets/image2.jpg'>
        <h3>You See</h3>
        <p>I love coding.</p>
    </div>
    <div class="col-lg-3 col-md-3 col-sm-3 col-xs-12 many-cols-centered">
        <img src='assets/image3.jpg'>
        <h3>You See</h3>
        <p>I love coding.</p>
    </div>
</div>

Для тех, кто хочет центрировать элементы столбца на экране, когда у вас нет точного числа, чтобы заполнить вашу сетку, я написал небольшой фрагмент JavaScript, чтобы вернуть имена классов:

function colCalculator(totalNumberOfElements, elementsPerRow, screenSize) {
    var arrayFill = function (size, content) {
        return Array.apply(null, Array(size)).map(String.prototype.valueOf, content);
    };

    var elementSize = parseInt(12 / elementsPerRow, 10);
    var normalClassName = 'col-' + screenSize + '-' + elementSize;
    var numberOfFittingElements = parseInt(totalNumberOfElements / elementsPerRow, 10) * elementsPerRow;
    var numberOfRemainingElements = totalNumberOfElements - numberOfFittingElements;
    var ret = arrayFill(numberOfFittingElements, normalClassName);
    var remainingSize = 12 - numberOfRemainingElements * elementSize;
    var remainingLeftSize = parseInt(remainingSize / 2, 10);
    return ret.concat(arrayFill(numberOfRemainingElements, normalClassName + ' col-' + screenSize + '-push-' + remainingLeftSize));
}

Если у вас есть 5 элементов, и вы хотите иметь 3 строки на экране md, вы делаете это:

colCalculator(5, 3, 'md')
>> ["col-md-4", "col-md-4", "col-md-4", "col-md-4 col-md-push-2", "col-md-4 col-md-push-2"]

Помните, что второй аргумент должен быть разделен на 12.

Поскольку мне никогда не нужно центрировать только один .col- внутри .row, я устанавливаю следующий класс в обертке .row моих целевых столбцов.

.col-center > [class*="col-"] {
    float: none;
    margin-left: auto;
    margin-right: auto;
}

Пример

<div class="full-container">
    <div class="row col-center">
        <div class="col-xs-11">
            Foo
        </div>
        <div class="col-xs-11">
            Bar
        </div>
    </div>
</div>

Добавьте этот фрагмент внутри вашего .row или .col, это для начальной загрузки 4 *

d-flex justify-content-center

Я предлагаю просто использовать класс text-center:

<body class="container">
    <div class="col-md-12 text-center">
        <img data-src="holder.js/100x100" alt="" />
    </div>
</body>

Чтобы быть более точным, система сетки Bootstrap содержит 12 столбцов, а для центрирования любого содержимого, например, контент занимает один столбец. Нужно будет занять два столбца сетки Bootstrap и разместить содержимое на половине двух занятых столбцов.

<div class="row">
   <div class="col-xs-2 col-xs-offset-5 centered">
      ... your content / data will come here ...
   </div>
</div>

'col-xs-offset-5' указывает системе координат, где начинать размещать контент.

'col-xs-2' сообщает системе координат, сколько оставшихся столбцов должно занимать содержимое.

'centtered' будет определенным классом, который будет центрировать контент.

Вот как выглядит этот пример в сетке Bootstrap.

Колонки:

1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12

....... смещение........ данные........не используется........

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

<div class="row">
    <div class="col-xs-2 col-xs-offset-5"></div>
</div>

Вы можете использовать другие col, а также col-md-2 и т.д.

Если вы поместите это в свою строку, все столбцы внутри будут центрированы:

.row-centered {
    display: flex;
    justify-content: space-between;
}

Обратите внимание, что если вы используете Bootstrap 4, вы можете использовать .align-items-center в своей row как Boostrap 4 теперь использует систему flex.

Метод 1:

<div class="container">
    <div class="row">
        <div class="col-md-2 col-md-offset-5">
            YOUR CONTENT
        </div>
    </div>
</div>

Метод 2:

CSS

.float-center{float: none;}


<div class="container">
    <div id="mydev" class="center-block float-center" style="width:75%;">
        YOUR CONTENT
    </div>
</div>

Bootstrap Советы, примеры и инструменты: OnAirCode

Не забудьте добавить !important. Тогда вы можете быть уверены, что элемент действительно будет в центре:

.col-centered{
  float: none !important;
  margin: 0 auto !important;
}

Относительно класса центрального блока в Bootstrap...

.center-block {
    display: block;
    margin-left: auto;
    margin-right: auto;
    float:none;
}

В некоторых случаях это не работает, например, список с левыми плавающими элементами списка. Чтобы зафиксировать это отображение изменений в таблице.

.center-block {
    display: table;
    margin-left: auto;
    margin-right: auto;
    float:none;
}

Не требуется CSS. Вы можете просто использовать тег HTML5 <center></center>.

Он автоматически настроит ваше содержимое в центр.

Это одна вещь, которая всегда приводила меня в бешенство о Bootstrap. Я рассмотрел проблему в pre 3.0 здесь http://tentaclecms.com/blog/2013/07/centring-columns-in-bootstrap/

Использование следующих работ отлично подходит как альтернатива.

.center, .sm-center, .md-center... {
   margin: 0 auto;
   float: none;

}

https://github.com/adampatterson/Dock/blob/master/assets/less/src/grid.less#L40