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

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

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

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

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

EDIT - как уже упоминалось в комментариях,center-block работает над содержимым столбца и display:block элементы, но не будет работать на самой колонке (col-* divs), потому что Bootstrap использует float.

---

обновить 2018

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

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

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

демо Bootstrap 4 Горизонтальное Центрирование

для вертикального центрирования в BS4 см.https://stackoverflow.com/a/41464397/171456

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

Bootstrap 3 Центр Вспомогательных Классов.

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

<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 и ниже) использует:маржа: 0 авто;, но он переопределяется свойством 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>   

это работает. Вероятно, хакерский способ, но он отлично работает. Он был протестирован на отзывчивость (Y).

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

С 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

можно использовать text-center для строки, и убедитесь, что внутренние дивы имеют 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/

просто установите один столбец, который отображает содержимое в 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 :-)

чтобы центрировать col-нам нужно использовать приведенный ниже код. cols-это плавающие элементы помимо margin auto. Мы также установим его на поплавок 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;
    }
}

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

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

1. центрируйте столбец из 2, компенсируя его 5
2. сделать вложенную строку, так что вы получите новый 12 колонны внутри 2 колонки.
3. поскольку вы хотите центрировать столбец 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>

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

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

механизм:

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

демо это здесь

поскольку 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>

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

justify-content: center;

можно центрировать столбец.

проверить flex.

потому что у меня никогда не было необходимости центрировать только один .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>

для тех, кто хочет центрировать элементы столбца на экране, когда у вас нет точного числа для заполнения сетки, я написал небольшой фрагмент 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.

чтобы центрировать более одного столбца в строке начальной загрузки - и количество 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>

это не мой код, но он отлично работает (протестирован на 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>

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

<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 и так далее, дайте мне знать, если возникнут какие-либо проблемы.

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

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

попробуй такое

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

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

чтобы быть более точным система сетки 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' сообщает системе сетки, сколько из оставшихся столбцов должно содержать содержимое занимать.

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

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

столбцы:

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

.......сдвиг....... .данные. .......не использовать........

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

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

Способ 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

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

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