这应该使图像居中，并使其响应。

<img src="..." class="img-responsive" style="margin:0 auto;"/>

2021.09来自一个项目:

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

如果使用Bootstrap v3.0.1或更高版本，则应该使用此解决方案。它不会用自定义CSS覆盖Bootstrap的样式，而是使用Bootstrap特性。

我最初的答案如下，供后人参考

这是一个很容易解决的问题。因为.img-responsive from Bootstrap已经设置了display: block，你可以使用margin: 0 auto将图像居中:

.product .img-responsive {
    margin: 0 auto;
}

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

尝试这段代码，它将工作的小图标也与bootstrap 4，因为没有中心块类是bootstrap 4，所以尝试这种方法，这将是有帮助的。你可以通过将。col-md-12设置为。col-md-8或。col-md-4来改变图像的位置，这取决于你。

<div class="container">
       <div class="row">
          <div class="col-md-12">
            <div class="text-xs-center text-lg-center">
           <img src="" class="img-thumbnail">
           </div>
          </div>
       </div>
  </div>

这应该使图像居中，并使其响应。

<img src="..." class="img-responsive" style="margin:0 auto;"/>