Preferowaną metodą centrowania kolumn jest użycie " offsetów "(tj.: col-md-offset-3)

Bootstrap 3.przykłady centrowania x

Dla elementów centrujących istnieje center-block Klasa pomocnicza .

Możesz również użyć text-center do wyśrodkować tekst (i elementy inline).

Demo: http://bootply.com/91632

edytuj - Jak wspomniano w komentarzach, center-block działa na kolumnie zawartość i elementy display:block, ale nie będą działać na samej kolumnie (col-* divs), ponieważ Bootstrap używa float.

Aktualizacja 2018

Teraz z Bootstrap 4 , metody centrowania zmieniły się..

• {[2] } jest nadal używany dla display:inline elementów
• mx-auto zastępuje center-block do środka display:block elementy
• offset-* lub mx-auto może być używany do wyśrodkowania kolumn siatki

mx-auto (automatyczne marginesy osi x) będą wyśrodkowane display:block lub display:flex elementów, które mają zdefiniowaną szerokość, (%, vw, px, itd..). Flexbox jest używany domyślnie na kolumnach siatki, więc istnieją również różne metody centrowania flexbox.

Demo Bootstrap 4 Poziome Centrowanie

Do centrowania pionowego w BS4 zobacz https://stackoverflow.com/a/41464397/171456

Teraz Bootstrap 3.1.1 działa z .center-block, a ta klasa pomocnicza działa z systemem kolumn.

Bootstrap 3 Helper Class Center .

Proszę sprawdzić to DEMO 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>

Row column center using col-center-block helper class.

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

Po prostu dodaj to do niestandardowego pliku CSS, edycja plików CSS Bootstrap bezpośrednio nie jest zalecana i anuluje możliwość korzystania z cdn.

.center-block {
    float: none !important
}

Dlaczego?

Bootstrap CSS (Wersja 3.7 i niższa) używa: margin: 0 auto; , ale jest zastępowany przez właściwość float kontenera size.

PS : Po dodaniu tej klasy nie zapomnij ustawić klas według odpowiedniej kolejności.

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

Bootstrap 3 ma teraz wbudowaną klasę dla tego .center-block

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

Jeśli nadal używasz 2.X następnie po prostu dodaj to do swojego CSS.

Moje podejście do kolumn środkowych polega na użyciu {[2] } dla kolumn i text-align: center dla rodzica kontenera.

Wystarczy dodać klasę CSS 'centered' do 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 Wersja 3 maKlasa text-center.

Po prostu dodaj tę klasę:

text-center

Po prostu załaduje ten styl:

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

Przykład:

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

To działa. Pewnie w hakerski sposób, ale działa ładnie. Został przetestowany pod kątem responsywności (Y).

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

Z Bootstrap v4, można to osiągnąć poprzez dodanie .justify-content-center do.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

Możesz użyć text-center dla wiersza i upewnij się, że wewnętrzne div mają display:inline-block (z nie float)

Jako:

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

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

The fiddle: http://jsfiddle.net/DTcHh/3177/

Po prostu ustaw jedną kolumnę wyświetlającą zawartość na col-xs-12 (mobile-first; -) i skonfiguruj kontener tylko tak, aby kontrolować, jak szeroka ma być Centralna zawartość, więc:

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

Aby zobaczyć demo, Zobacz http://codepen.io/Kebten/pen/gpRNMe :-)

Aby wyśrodkować col - musimy użyć poniższego kodu. cols są elementami pływającymi oprócz margin auto. Ustawimy go również na float none,

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

Aby wyśrodkować powyższy col-lg-1 z klasą wyśrodkowaną, napiszemy:

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

Aby wyśrodkować zawartość wewnątrz div, użyj text-align:center,

.centered {
    text-align: center;
}

Jeśli chcesz wyśrodkować go tylko na pulpicie i większym ekranie, a nie na urządzeniach mobilnych, użyj następującego zapytania o media.

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

I aby wyśrodkować div tylko w wersji mobilnej, użyj poniżej kod.

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

To prawdopodobnie nie jest najlepsza odpowiedź, ale jest jeszcze jedno twórcze rozwiązanie. Jak zauważył koala_dev, kompensacja kolumn działa tylko dla parzystych rozmiarów kolumn. Jednak dzięki zagnieżdżaniu wierszy można również wyśrodkować nierówne kolumny.

Aby trzymać się pierwotnego pytania, gdzie chcesz wyśrodkować kolumnę 1 wewnątrz siatki 12.

1. Wyśrodkuj kolumnę 2 przez przesunięcie jej 5
2. Utwórz zagnieżdżony wiersz, aby uzyskać nowe 12 kolumn wewnątrz 2 kolumny.
3. ponieważ chcesz wyśrodkować kolumnę 1, A 1 jest "połową" 2( Co wyśrodkowaliśmy w kroku 1), Teraz musisz wyśrodkować kolumnę 6 w zagnieżdżonym wierszu, co można łatwo zrobić, kompensując GO 3.

Na przykład:

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

Patrz ten fiddle , Należy pamiętać, że należy zwiększyć rozmiar okna wyjściowego, aby również zobaczyć wynik, w przeciwnym razie kolumny zostaną zawinięte.

Innym sposobem kompensacji jest posiadanie dwóch pustych wierszy, na przykład:

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

Możemy to osiągnąć za pomocą mechanizmu układu tabeli:

Mechanizm jest:

1. zawiń wszystkie kolumny w jeden div.
2. Stwórz div jako tabelę ze stałym układem.
3. Utwórz każdą kolumnę jako komórkę tabeli.
4. użyj właściwości vertical-align, aby kontrolować pozycję zawartości.

Przykładowe demo jest tutaj

Jako że koala_dev użył w swoim podejściu 1, wolałbym metodę offsetową zamiast środkowych bloków lub marginesów, która ma ograniczone zastosowanie, ale jak wspomniał:

Teraz, jest oczywistą wadą tej metody, działa tylko dla równych rozmiarów kolumn, więc tylko .col-X-2,col-X-4, Col-x-6, col-x-8 i col-X-10 są obsługiwane.

Można to rozwiązać za pomocą następującego podejścia dla nieparzystych kolumn.

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

Możesz użyć bardzo elastycznego rozwiązania flexbox do swojego Bootstrap.

justify-content: center;

Zobacz flex.

Ponieważ nigdy nie muszę wyśrodkowywać tylko jednego .col- w .row, ustawiam następującą klasę na zawijaniu .row moich kolumn docelowych.

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

Przykład

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

Dla tych, którzy chcą wyśrodkować elementy kolumn na ekranie, gdy nie masz dokładnej liczby do wypełnienia siatki, napisałem mały fragment JavaScript, aby zwrócić nazwy klas:

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

Jeśli masz 5 elementów i chcesz mieć 3 w wierszu na ekranie md, Zrób to:

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

Należy pamiętać, że drugi argument musi być podzielny przez 12.

Aby wyśrodkować więcej niż jedną kolumnę w wierszu Bootstrap - a liczba kolumn jest nieparzysta, po prostu dodaj tę klasę css do wszystkich kolumn w tym wierszu:

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

Więc w Twoim HTML masz coś takiego:

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

To nie jest mój kod, ale działa idealnie (testowany na Bootstrap 3) i nie muszę zadzierać z col-offsetem.

Demo:

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

Spróbuj tego kodu.

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

Tutaj użyłem col-lg-1, a przesunięcie powinno wynosić 10 dla prawidłowego wyśrodkowania div na dużych urządzeniach, jeśli potrzebujesz go wyśrodkować na mediam na duże urządzenie, po prostu zmień lg na md i tak dalej, daj mi znać, jeśli jakiś problem.

Jeśli umieścisz to w wierszu, wszystkie kolumny wewnątrz będą wyśrodkowane:

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

Spróbuj tego

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

Możesz używać innych col jak również col-md-2, itp.

Aby być bardziej precyzyjnym system siatki Bootstrap zawiera 12 kolumn i wyśrodkować dowolną zawartość powiedzmy, na przykład, zawartość zajmuje jedną kolumnę. Trzeba będzie zająć dwie kolumny siatki Bootstrap i umieścić zawartość na połowie dwóch zajmowanych kolumn.

<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' mówi systemowi siatki, od czego zacząć umieszczać zawartość.

'col-xs-2' mówi systemowi siatki, ile z pozostałych kolumn powinno zawierać zawartość zająć.

'centered' będzie zdefiniowaną klasą, która wyśrodkuje zawartość.

Oto jak ten przykład wygląda w systemie Bootstrap ' a.

Kolumny:

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

.......przesunięcie....... .data. .......nieużywany........

Nie zapomnij dodać !important. Wtedy możesz być pewien, że element naprawdę będzie w środku:

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

Metoda 1:

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

Metoda 2:

CSS

.float-center{float: none;}


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

Porady, przykłady i narzędzia Bootstrap: OnAirCode

Proponuję po prostu użyć klasy text-center:

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