引导命名约定有自己的样式，col-XS-1指的是包含元素宽度的8.33%的列。你的文本很可能会远远超出指定的宽度，并且不可能居中。如果你想要它约束到div，你可以使用像css的断字。

要将内容集中在一个大到足以展开到文本之外的元素中，有两个选项。

选项1:HTML中心标签

<div class="row">
  <div class="col-xs-1 center-block">
    <center>
      <span>aaaaaaaaaaaaaaaaaaaaaaaaaaa</span>
    </center>
  </div>
</div>

选项2:CSS文本对齐

<div class="row">
  <div class="col-xs-1 center-block" style="text-align:center;">
    <span>aaaaaaaaaaaaaaaaaaaaaaaaaaa</span>
  </div>
</div>

如果你想把所有东西都限制在列的宽度

<div class="row">
  <div class="col-xs-1 center-block" style="text-align:center;word-break:break-all;">
    <span>aaaaaaaaaaaaaaaaaaaaaaaaaaa</span>
  </div>
</div>

更新-使用Bootstrap的文本中心类

<div class="row">
  <div class="col-xs-1 center-block text-center">
    <span>aaaaaaaaaaaaaaaaaaaaaaaaaaa</span>
  </div>
</div>

FlexBox方法

<div class="row">
  <div class="flexBox" style="
    display: flex;
    flex-flow: row wrap;
    justify-content: center;">
    <span>aaaaaaaaaaaaaaaaaaaaaaaaaaa</span>
  </div>
</div>

http://jsfiddle.net/usth0kd2/13/

你可以添加float:none;保证金:汽车;样式化以使列内容居中。

[2022年4月更新]:测试并包括5.1版本的引导。

我知道这个问题很老了。这个问题并没有提到他使用的是哪个版本的Bootstrap。所以我假设这个问题的答案已经解决了。

如果你们中的任何人(像我一样)偶然发现了这个问题，并使用当前的bootstrap 5.0(2020)和4.5(2019)框架寻找答案，那么这里有解决方案。

引导4.5、5.0和5.1

在列div上使用d-flex justify-content-center，这将使列内的所有内容居中。

<div class="row">
    <div class="col-4 d-flex justify-content-center">
        // Image
    </div>
</div>

如果你想在col内对齐文本，只需使用文本中心

<div class="row">
    <div class="col-4 text-center">
        // text only
    </div>
</div>

如果列中有文本和图像，则需要使用d-flex justify-content-center和text-center。

<div class="row">
    <div class="col-4 d-flex justify-content-center text-center">
        // for image and text
    </div>
</div>

col- gl -4 col-md-6

 1. col-lg-4 ≥ 1200px (popular 1366, 1600, 1920+)
 2. col-md-6 ≥ 970px (popular 1024, 1200)
 3. col-sm-8 ≥ 768px (popular 800, 768)
 4. col-11 set default smaller devices for gutter (popular 600,480,414,375,360,312)
 5. mx-auto = always block center

没必要把事情复杂化。使用Bootstrap 4，您可以简单地使用边缘自动类my-auto在列内水平对齐项

         <div class="col-md-6 my-auto">
           <h3>Lorem ipsum.</h3>
         </div>

这是一种简单的方法。

<div class="row">
  <div class="col-md-6 mx-auto">
    <p>My text</p>
  </div>
</div>

数字6控制列的宽度。