toast 左侧居中需用 position-fixed + start-0 + top-50 + translate-middle-y 组合于外层容器，因 .toast 默认 position-relative，直接加 left-0 top-50 无效且无 transform 支持。
Toast 要固定在屏幕左侧中央，必须用 position-fixed + top-50 + start-0 + translate-middle-y 组合，光靠 fixed-left 或 left-0 不行——Bootstrap 5 没有 fixed-left 这类类名，且仅设 left-0 会贴左上角，不垂直居中。
Toast 左侧居中需要哪些定位类组合
核心是让外层容器（不是单个 .toast）脱离文档流并精确定位：
-
position-fixed必须加在外层包裹容器上，不是.toast自身 -
start-0控制容器左边缘贴视口左侧 -
top-50让容器顶部对齐视口垂直中线 -
translate-middle-y抵消自身高度一半，实现真正垂直居中 - 不要给容器加
width或max-width，否则会影响 Toast 自适应宽度
为什么不能直接给 .toast 加 left-0 top-50
因为 Bootstrap 5 的 .toast 默认是 position-relative，加 left-0 top-50 是相对于其父容器偏移，而父容器通常是普通块级元素（如 <div>），没设 <code>position: relative 就无效；即使设了，也会受父容器 padding、margin、overflow 影响，导致位置飘移或被裁剪。
更关键的是：.toast 本身没有 transform 支持，translate-middle-y 对它不起作用——这个类只对 position-fixed 或 position-absolute 元素生效。
实际 HTML 结构怎么写才可靠
必须用一个带语义和定位的外层容器包裹所有 Toast，且该容器要满足可访问性要求：
<div aria-live="polite" aria-atomic="true" class="position-fixed start-0 top-50 translate-middle-y z-index-3">
<div class="toast">
<div class="toast-header">...</div>
<div class="toast-body">消息内容</div>
</div>
</div>
注意几点：
-
z-index-3是 Bootstrap 5 内置工具类（对应z-index: 3），避免被 navbar、modal 遮挡 - 不要把这整个结构塞进
.container或.row，它们会引入额外 padding 和 flex 行为，破坏position-fixed - 如果页面有 sticky header，建议把
top值微调为top-10或内联style="top: 2.5rem;"，避开遮挡
动态插入 Toast 时容易漏掉的关键步骤
JS 动态创建 Toast 后直接 new bootstrap.Toast(el) 会失败——元素还没挂载到 DOM：
- 先用
document.body.appendChild(containerEl)或指定父节点插入外层容器 - 再用
containerEl.querySelector('.toast')获取内部 toast 元素 - 最后调用
new bootstrap.Toast(toastEl).show() - 别忘了每次弹出后手动
dispose()，否则频繁触发会导致内存泄漏
真正容易被忽略的是：外层容器的 aria-live="polite" 和 position-fixed 必须同时存在，缺一不可；而 translate-middle-y 只对 top-50 + position-fixed 组合生效，单独用没效果。
