translate-middle 并非万能居中方案，必须配合 position: absolute/fixed 与父容器 position: relative 使用；单独用于普通块级元素无效，因其本质是 transform: translate(-50%, -50%)，仅对定位元素生效。
translate-middle 不是万能居中方案，它只在特定定位上下文中有效——必须配合 position: absolute 或 position: fixed 使用，且父容器得是相对定位（position: relative）。单独加在普通块级元素上完全没反应。
translate-middle 为什么经常“失效”？
常见错误是把它当 flex 居中替代品用：比如给一个 <div class="translate-middle"> 加在普通文档流里，结果纹丝不动。这是因为 <code>translate-middle 本质是 CSS transform: translate(-50%, -50%) 的封装，而 transform 对非定位元素的位移效果不可见（浏览器不触发重排，也不改变布局流）。
典型失效场景包括：
- 父容器没设
position: relative，子元素position: absolute会相对于 body 定位，导致居中偏移 - 用了
translate-middle-x却忘了配top: 50%，结果只水平动、垂直不动 - 在
display: flex容器里混用translate-middle，flex 自身对齐逻辑和 transform 冲突，视觉错乱 - 图标用
<i class="bi bi-x"></i>套了translate-middle，但没加position: absolute和top: 50%，白加
translate-middle 正确搭配组合
它专为「绝对定位元素真·居中」设计，典型用法就是时间轴图标、弹窗关闭按钮、徽章角标这类需要脱离文档流又精准居中的小元素。
必须同时满足三个条件：
- 父容器有
position: relative（Bootstrap 里常用position-relative类） - 子元素设
position: absolute+top: 50%+start: 0（或left: 0） - 再加
translate-middle（等价于transform: translate(-50%, -50%)）
示例（垂直时间轴图标）：
<div class="position-relative border-start border-2"> <span class="position-absolute start-0 top-50 translate-middle bg-dark text-white rounded-circle d-flex align-items-center justify-content-center" style="width: 24px; height: 24px;">●</span> <div class="ps-4">内容区</div> </div>
注意：start-0 是 RTL 安全写法，比 left: 0 更稳妥；top-50 提供基准线，translate-middle 才负责回拉自身宽高一半。
translate-middle-x 和 translate-middle-y 的适用边界
这两个是单向位移类，比全向 translate-middle 更可控，但也更易误用。
translate-middle-x 要求元素已设 top: 50%（或 bottom: 50%），否则水平居中了，垂直还在顶部；translate-middle-y 同理，必须配 start: 0 或 end: 0 才能生效。
常见用途：
-
translate-middle-x：模态框顶部关闭按钮（position: absolute; top: 1rem; right: 1rem;→ 加该类后水平居中于右侧区域） -
translate-middle-y：侧边导航菜单的箭头图标（position: absolute; top: 50%; end: 1rem;→ 垂直居中于菜单项高度中间） - 别用
translate-middle-y去“修正” flex 容器里文字的垂直位置——那是align-items-center的事
和 flex 居中方案的本质区别
translate-middle 是「基于坐标系的像素级位移」，d-flex justify-content-center align-items-center 是「基于布局流的语义化对齐」。前者适合微调、覆盖、图标类小元素；后者适合内容区块、卡片、登录框等主体结构。
容易被忽略的关键点：
-
translate-middle会让元素脱离文档流，可能影响兄弟元素布局，而 flex 居中不会 - 在缩放或高 DPI 屏幕下，
transform位移仍精确；flex 的align-items: center在某些老安卓 WebView 中有轻微偏差 - 如果父容器高度动态变化（比如折叠面板展开），
translate-middle不会自动重算，但 flex 会实时响应 - 做动画时，
transform性能远优于 top/left，所以translate-middle更适合交互动效
