假设图片旁边没有其他东西，最好的方法是在img父目录中使用text-align: center:

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

Edit

正如在其他答案中提到的，您可以将引导CSS类.text-center添加到父元素中。它做的事情完全相同，并且在v2.3.3和v3中都可用

您可以更改之前解决方案的CSS如下所示:

.container, .row { text-align: center; }

这也应该将父div中的所有元素居中。

Twitter bootstrap有一个以。pagation - centric为中心的类

这对我来说很有效:

<div class="row-fluid">
   <div class="span12 pagination-centered"><img src="header.png" alt="header" /></div>
</div>

这个类的css是:

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

正确的做法是

<div class="row text-center">
  <img ...>
</div>

我也需要同样的东西，在这里我找到了解决方案:

https://stackoverflow.com/a/15084576/1140407

<div class="container">
  <div class="row">
    <div class="span9 centred">
      This div will be centred.
    </div>
  </div>
</div>

和CSS:

[class*="span"].centred {
  margin-left: auto;
  margin-right: auto;
  float: none;
}

Twitter Bootstrap v3.0.3有一个类:center-block

中心内容块 设置要显示的元素:块和居中通过边距。可作为mixin和类使用。

只需要在img标签中添加一个类.center-block，如下所示

<div class="container">
  <div class="row">
    <div class="span4"></div>
    <div class="span4"><img class="center-block" src="logo.png" /></div>
    <div class="span4"></div>
  </div>
</div>

在Bootstrap中已经有css样式调用.center-block

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

你可以看到这里的一个样本

添加'center-block'到图像类-不需要额外的css

<img src="images/default.jpg" class="center-block img-responsive"/>

你应该使用

<div class="row fluid-img">
  <img class="col-lg-12 col-xs-12" src="src.png">
</div>

.fluid-img {
    margin: 60px auto;
}

@media( min-width: 768px ){
        .fluid-img {
            max-width: 768px;
        }
}
@media screen and (min-width: 768px) {
        .fluid-img {
            padding-left: 0;
            padding-right: 0;
        }
}

对我有用。试着使用中心方块

<div class="container row text-center">
    <div class="row">
      <div class="span4"></div>
      <div class="span4"><img class="center-block" src="logo.png" /></div>
      <div class="span4"></div>
    </div>
</div>

你可以在引导img类中使用margin属性。

.name-of-class .img-responsive { margin: 0 auto; }

如果浏览器版本不是问题的话，我们可以使用新的HTML5功能:

在HTML文件中:

<div class="centerBloc">
  I will be in the center
</div>

在CSS文件中，我们写:

body .centerBloc {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

因此，div可以在浏览器中完美地居中。

你可以用下面的。支持Bootstrap 3。上面的x。

<img src="..." alt="..." class="img-responsive center-block" />

更新2018

在Bootstrap 4中，中心块类不再存在。使用mx-auto d-block…

<img src="..." class="mx-auto d-block"/>

我对容器中的一行使用了justification -content-center类。与Bootstrap 4合作良好。

<div class="container-fluid">
  <div class="row justify-content-center">
   <img src="logo.png" />
  </div>
</div>

我创建了这个并添加到Site.css中。

.img-responsive-center {
    display: block;
    height: auto;
    max-width: 100%;
    margin-left:auto;
    margin-right:auto;
}

只需使用下面的引导类来修复它

<img class="mx-auto d-block" src="../path/to/.." alt="Image">

上面的很多选择对我都不起作用。 然而，这奏效了!

<div class="container">
    <div class="row">
        <div class="col-sm-12" style="text-align: center;"><img class="center-block" src="img_path" /></div>
    </div>
</div>

在 Bootstarp 5.0 中

Use

.mx-auto .d-block