简单地把所有的图片缩略图放在row/col div中，就像这样:

<div class="row text-center">
 <div class="col-12">
  # your images here...
 </div>
</div>

一切都会好起来的!

<div class="col-md-12 text-center">
    <img class="img-responsive tocenter" />
</div>

.

<style>
   .tocenter {
    margin:0 auto;
    display: inline;
    }
</style>

在Twitter Bootstrap 3中有.center-block类(从v3.0.1开始)，所以使用:

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

2021.09来自一个项目:

                    <div class="d-flex" style="height: 60px; width: 60px;">
                            <img alt="ddd" src="myurl" class="m-auto"/>
                    </div>

到目前为止，接受的最佳解决方案似乎是<img class="center-block"…/ >。但是没有人提到过中央块是如何工作的。

以Bootstrap v3.3.6为例:

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

<img>的display默认值为inline。Value block将一个元素显示为块元素(如<p>)。它从一个新的行开始，并占用整个宽度。通过这种方式，两个边距设置让图像水平地保持在中间。

我建议采用更“抽象”的分类。添加一个新类"img-center"，它可以和.img-responsive类结合使用:

// Center responsive images
.img-responsive.img-center {
  margin: 0 auto;
}