最稳方案是父容器设 display: flex + align-items: center 并声明明确高度（如 min-height: 36px），因 vertical-align 对非 table-cell/inline-block 元素无效，flex 要求父容器有高度参考、display: flex 且子元素不设 vertical-align。
最稳的方案是给父容器设 display: flex + align-items: center，但必须确保父容器有明确高度（比如 height: 40px 或 min-height: 40px），否则“写了等于没写”。
为什么 vertical-align: middle 在状态灯上常失效
状态指示灯通常是 <span></span>、<i></i> 或带 background-color 的小 <div>，不是表格单元格——所以 <code>vertical-align 对它完全不起作用。它只对 table-cell、inline 和 inline-block 元素生效，且依赖行高上下文。
- 把状态灯写成
<span class="status-dot"></span>后加vertical-align: middle：无效，因为默认是display: inline，但父容器若为块级且无line-height匹配，就悬空对不齐 - 强行给父容器设
line-height: 40px：能凑合单行文本+小圆点，但一旦后面加图标或文字换行，立刻错位 - 用
valign="middle"属性：HTML5 已废弃，React/Vue 中直接被忽略，别碰
display: flex 是首选，但要注意三个硬条件
Flex 布局对状态灯这类小尺寸、需稳定对齐的元素最可靠，前提是满足以下三点：
- 父容器必须声明
display: flex（不能只在子元素上加） - 父容器必须有可计算的高度来源：要么显式设
height/min-height，要么被内容（如含文本的同行元素）撑开 - 避免子元素自身设
vertical-align—— 它和flex冲突，浏览器会静默忽略
示例（简洁可用）：
.status-row {
display: flex;
align-items: center;
min-height: 36px; /* 关键：提供垂直参考空间 */
padding: 0 8px;
}
<p>.status-dot {
width: 12px;
height: 12px;
border-radius: 50%;
background-color: #4caf50;
}
</p>
绝对定位 + transform 适合脱离文档流的状态灯
当状态灯是悬浮角标、工具提示旁的微标（比如右上角红点），或者父容器高度不可控时，用绝对定位更稳妥：
- 父容器设
position: relative - 状态灯设
position: absolute+top: 50%+transform: translateY(-50%) - 不需要知道父容器高度，也不依赖 flex 上下文
- 注意：如果父容器本身是 flex 容器，
top: 50%会相对于 flex 行高计算，有时偏移异常；此时改用inset-block-start: 50%（现代浏览器）或回退到margin-top手动调
常见错误：transform: translate(-50%, -50%) 是水平+垂直一起居中，但状态灯往往只要垂直对齐——多写的 -50% 水平部分可能把灯拉偏，删掉更安全。
真正容易被忽略的是：所有垂直居中逻辑都依赖一个「高度参考」。没有这个参考（哪怕只是 padding: 6px 0），再正确的 CSS 也渲染不出居中效果。状态灯体积小、易被忽略高度约束，检查时优先看父容器有没有可测量的垂直空间。
