你可以在这里使用属性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>

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

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

要添加到已经给出的答案，将img-responsive与img-thumbnail结合使用将把display: block设置为display: inline block。

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

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

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

@media (max-width: 767px) {
   img {
     display: table;
     margin: 0 auto;
   }
}

2021.09来自一个项目:

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