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

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

一切都会好起来的!

你可以在这里使用属性d-block，或者你可以在bootstrap中使用属性'text-center'或在css中使用'text-align: center'的父div。

图像默认显示为内联块，您需要将其显示为块以便以.mx-auto居中。这可以用内置的.d-block完成:

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

或者将其保留为内联块，并使用.text-center将其包装在div中:

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

2021.09来自一个项目:

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

如果你使用Bootstrap 3，只需使用.text-center类。

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

注意:这对img-responsive不起作用

您仍然可以使用img-responsive，而不影响使用此样式类的其他图像。

你可以在这个标签前面加上section id/ div id/class来定义一个img被嵌套的顺序。这个自定义的img-responsive将只在该区域工作。

假设你有一个HTML区域定义为:

<section id="work"> 
    <div class="container">
        <div class="row">
            <img class="img-responsive" src="some_image.jpg">
        </div>
    </div>
</section>

然后，你的CSS可以是:

section#work .img-responsive{
    margin: 0 auto;
}

注意:这个答案与整体改变img-responsive的潜在影响有关。当然，中心块是最简单的解决方案。

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

以Bootstrap v3.3.6为例:

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

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