关闭图标是 background-image 渲染的块级替换元素，不响应 vertical-align、line-height；top:50% 偏移因缺少 position:relative 祖先；伪元素方案需清空背景、设 color:currentColor 并处理状态。
关闭图标不是文字，vertical-align 失效是必然的
很多人给 .btn-close 加 vertical-align: middle 或 line-height，结果毫无反应——因为 Bootstrap 5.3+ 的关闭图标是通过 background-image 渲染 SVG，本质是块级替换元素（replaced element），不参与行内格式化上下文。它压根不认 vertical-align，也不响应 line-height 或 font-size 变化。
top: 50%; transform: translateY(-50%) 为什么常偏移？
原生 .btn-close 容器（即 .alert .btn-close）默认没有设 position: relative，直接对它用 top: 50% 会相对于最近的定位祖先计算，而非 Alert 自身边界。更常见的是：Alert 内容高度变化后，父容器未重绘，导致 transform 基准错位。
- 必须显式给
.alert或其直接包裹.btn-close的容器加position: relative - 如果 Alert 含动态内容（如图片、异步文本），
shown.bs.modal或 DOM ready 时机不足以保证尺寸稳定，需监听load或用requestAnimationFrame延迟执行居中逻辑 - 别依赖固定
top: 1rem类似值——Bootstrap 原生靠right: 1rem+top: 1rem定位，但 Alert 高度增加时，视觉上按钮就“浮”在上方了
伪元素方案为何更稳？
用 ::before 插入字符（如 "×"）并配合 position: absolute + transform: translate(-50%, -50%)，能彻底绕开 background-image 和 filter 的干扰。但容易漏掉几个关键点：
-
.btn-close必须先清空背景：background: none; padding: 0;，否则新伪元素会被原生图标遮盖 -
::before要设color: currentColor，否则暗色模式下图标变黑不可见 -
:hover、:disabled、:focus状态必须单独写，比如.btn-close:hover::before { opacity: .75; }，否则悬停时图标不变色、无反馈 - 别忘了
pointer-events: auto——某些重置 CSS 会全局设pointer-events: none，导致按钮失活
最易被忽略的兼容性坑
真正让居中失效的，往往不是定位代码本身，而是布局上下文被意外破坏：
立即学习“前端免费学习笔记（深入）”；
-
.alert外层若套了display: grid或flex容器，且未设align-items: start，可能把整个 Alert 拉高，导致内部绝对定位失准 - 使用 Sass 编译时，如果
@import顺序错误（比如自定义样式在 Bootstrap 原生 CSS 之前加载），!important覆盖会失败 - 移动端 Safari 对
transform: translate()在绝对定位元素上的渲染有细微偏差，建议补will-change: transform提前告知合成层
实际调试时，优先检查 DevTools 中 .btn-close 的 computed position 和 containing block，而不是反复调 top 值。
