d-block 是居中的前提，因为图片默认为 inline 元素，受文本基线等影响，margin: 0 auto 无效；必须转为块级元素才能使 mx-auto 生效。
为什么 d-block 是居中的前提？
图片默认是 inline 元素，会受父容器内文本基线、空白符、行高影响，margin: 0 auto 对它完全无效。必须先用 d-block 把它转成块级元素，才能让左右外边距生效。
常见错误现象：mx-auto 加了但图片没动——大概率漏了 d-block，或者父容器没设宽度（比如父容器是 div 默认 100% 宽，此时 mx-auto 实际无效果）。
-
d-block等价于display: block，强制脱离行内流 - 如果图片本身有
float或position: absolute，d-block仍有效，但mx-auto会失效（需配合position: relative和left: 50%等方案） - Bootstrap 5+ 中
d-block属于 display 工具类，无需额外引入
如何用 mx-auto 实现水平居中？
mx-auto 是 Bootstrap 的 margin 工具类，等价于 margin-left: auto; margin-right: auto。它只在块级元素且宽度小于父容器时起作用。
使用场景：响应式图片居中、卡片内图标居中、模态框标题旁的 logo 居中。
- 父容器必须有明确宽度（如
container、col，或自定义max-width），否则图片占满父宽，mx-auto没空间可“挤” - 图片自身不要设
width: 100%（除非你想要撑满并居中——那其实是父容器居中，不是图片居中） - 若图片带
img-fluid（即max-width: 100%; height: auto），mx-auto依然有效，前提是它没被拉伸到 100% 宽
垂直居中为什么不能只靠 mx-auto？
mx-auto 只管水平方向；垂直居中需要额外手段。最轻量、兼容性好的组合是：d-flex + justify-content-center + align-items-center。
错误做法举例：给图片加 my-auto ——它只对 flex 子项或表格单元格生效，对普通块级图片无效。
- 推荐写法：
<div class="d-flex justify-content-center align-items-center" style="height: 300px;"><img src="..." class="d-block"></div> - 如果父容器高度不固定，改用
min-height或视口单位（如min-height: 100vh）确保有高度可居中 - 避免在
img上直接设align-self-center：它依赖父容器是 flex，且仅控制单个子项，不如统一用align-items-center
移动端适配与性能注意点
居中本身不耗性能，但不当的写法会引发重排或图片加载错位。尤其在 Safari iOS 上，img 在未设置宽高时可能先以 0×0 渲染，导致 mx-auto 失效几帧。
- 始终为
img设置width和height属性（哪怕只是占位值），或用aspect-ratio配合object-fit - 慎用
img-fluid+mx-auto在窄屏下：当图片被缩小时，mx-auto仍工作，但若父容器有 padding，视觉上可能偏移——检查是否需要px-0或g-0 - 如果图片来自 CMS 或用户上传，宽高未知，优先用 CSS aspect-ratio +
object-fit: cover替代 JS 测量
真正容易被忽略的是：居中行为依赖渲染时的尺寸快照。图片异步加载、字体加载延迟、CSS 加载顺序，都可能导致初始闪动。别只测“最终效果”，要观察首帧。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
