//add this to your css
    .myClass{
          margin 0 auto;
          }

// add the class to the span tag( could add it to the div and not using a span  
// at all
    <div class="row">
   <div class="col-xs-1 center-block">
       <span class="myClass">aaaaaaaaaaaaaaaaaaaaaaaaaaa</span>
   </div>
 </div>

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

使用文本中心代替中心块。

或者在span元素上使用center-block(我把列做宽了，这样你可以更好地看到对齐):

<div class="row">
   <div class="col-xs-10" style="background-color:#123;">
      <span class="center-block" style="width:100px; background-color:#ccc;">abc</span>
   </div>
</div>

Bootstrap 4/Bootstrap 5，水平和垂直对齐内容使用伸缩盒

<div class="page-hero d-flex align-items-center justify-content-center">
 <h1>Some text </h1>
</div>

使用引导类align-items-center和justify-content-center

.page-hero { 身高:200 px; 背景颜色:灰色; ｝ <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="匿名"> <div class="page-hero - d-flex align-items-center - align- content-center"> <h1>一些文本</h1> < / div >

这是一种简单的方法。

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

数字6控制列的宽度。

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