我使用Bootstrap 3做一个目录。当在平板电脑上显示时，产品图像看起来很难看，因为它们的尺寸很小(500x500)，在浏览器中宽度为767像素。我想把图像放在屏幕的中央，但由于某种原因我不能。谁将帮助解决这个问题?
当前回答
如果使用Bootstrap v3.0.1或更高版本，则应该使用此解决方案。它不会用自定义CSS覆盖Bootstrap的样式，而是使用Bootstrap特性。
我最初的答案如下，供后人参考
这是一个很容易解决的问题。因为.img-responsive from Bootstrap已经设置了display: block，你可以使用margin: 0 auto将图像居中:
.product .img-responsive {
margin: 0 auto;
}
其他回答
如果使用Bootstrap v3.0.1或更高版本，则应该使用此解决方案。它不会用自定义CSS覆盖Bootstrap的样式，而是使用Bootstrap特性。
我最初的答案如下，供后人参考
这是一个很容易解决的问题。因为.img-responsive from Bootstrap已经设置了display: block，你可以使用margin: 0 auto将图像居中:
.product .img-responsive {
margin: 0 auto;
}
这应该使图像居中，并使其响应。
<img src="..." class="img-responsive" style="margin:0 auto;"/>
如果你使用Bootstrap 3，只需使用.text-center类。
<div class="text-center">
<img src="..." alt="..."/>
</div>
注意:这对img-responsive不起作用
简单地把所有的图片缩略图放在row/col div中，就像这样:
<div class="row text-center">
<div class="col-12">
# your images here...
</div>
</div>
一切都会好起来的!
2021.09来自一个项目:
<div class="d-flex" style="height: 60px; width: 60px;">
<img alt="ddd" src="myurl" class="m-auto"/>
</div>
