Bootstrap中图片居中及缩小问题：现有方案无效求助

嘿，我之前在Bootstrap 4项目里也碰到过一模一样的坑，咱们一步步来排查解决！

首先先确认几个关键前提，再给你几个靠谱的解决方案：

一、先检查Bootstrap是否正确加载 #

有时候咱们以为引入了Bootstrap，但其实路径写错了或者依赖没到位。你可以打开浏览器的开发者工具（F12），切换到Network标签，刷新页面看看Bootstrap的CSS文件是不是成功加载了（状态码是200）。如果加载失败，先把这个问题解决，不然所有Bootstrap自带的类都不会生效。

二、试试这几个靠谱的居中方案 #

方案1：用父容器的text-center类（最稳妥） #

Bootstrap 4里，text-center可以让容器内的行内/行内块元素居中，而图片默认是行内块元素，所以直接把图片包在这个容器里就行：

<div class="text-center">
  <img src="x.png" class="img-fluid"> <!-- img-fluid是响应式图片类，可选但推荐 -->
</div>

这个方法几乎不会有冲突，除非你给父容器加了float或者position:absolute这类会破坏文本流的样式。

方案2：给图片加mx-auto d-block类（你试过但可能有隐藏问题） #

你之前用的<img class="mx-auto d-block" src="x.png">其实是Bootstrap 4的标准写法，但没生效可能是这两个原因：

• 图片本身宽度是100%，占满了父容器，所以看不出居中效果。可以给图片加个宽度限制，比如style="width: 50%;"
• 父容器是行内元素，或者父容器的宽度和图片一样。可以给父容器设置width: 100%;再试试：

<div style="width: 100%;">
  <img src="x.png" class="mx-auto d-block" style="width: 50%;">
</div>

方案3：自定义类要确保优先级和属性完整 #

你写的.img-center {margin:0 auto;}缺了一个关键属性：display: block;。因为margin: 0 auto只对块级元素生效，而图片默认是行内块，所以要补上：

.img-center {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 50%; /* 必须设置宽度，不然图片占满容器就没居中效果了 */
}

然后用<img src="x.png" class="img-center">就行。

三、排查样式冲突 #

如果上面的方法都不行，就用浏览器开发者工具的Elements面板，选中图片元素，看Styles标签里的样式：

• 看看margin属性是不是被划掉了（说明被其他优先级更高的CSS规则覆盖了）
• 看看display属性是不是被改成了inline或者其他值
  找到冲突的样式后，要么调整自定义类的优先级（比如加个父容器选择器），要么删掉冲突的规则。

内容的提问来源于stack exchange，提问作者Karachay