ol/li 的 marker 无法直接 vertical-align，因其是浏览器生成的伪内容；真正影响对齐的是 line-height 和 font baseline；最可靠方案是用 flex + counter 替代原生 marker。
ol/li 的 marker 无法直接 vertical-align
HTML 有序列表 vertical-align 对它完全无效。你写 li { vertical-align: middle; } 或给 li::marker 加该属性，浏览器会忽略——这不是 bug，是规范行为。
真正能影响序号对齐的，只有两个东西：行高（line-height）和字体基线（font baseline）。当 li 内容是单行文本时，序号默认按第一行文字基线对齐；一旦换行或含行内元素，序号就“卡”在顶部，看起来像没居中。
用 display: flex 替代默认 list-item 布局
最可靠的做法是绕过原生 marker 机制，把 li 变成 Flex 容器，手动分离序号与内容：
- 给
li设display: flex+align-items: center - 用
counter-increment和::before生成序号，而非依赖原生 marker - 显式控制序号宽度（如
min-width: 2em）避免挤压文本 - 避免在
li上设list-style: none后又忘了重置计数器——必须配counter-reset: item在ol上
示例关键片段：
ol {
counter-reset: item;
}
ol li {
display: flex;
align-items: center;
line-height: 1.5;
}
ol li::before {
content: counter(item) ".";
counter-increment: item;
margin-right: 0.5em;
min-width: 2em;
text-align: right;
}
table-cell 方案只适用于单行且无嵌套
如果项目必须兼容 IE11 且列表极简单（纯文本、单行、无 等行内标签），可尝试：
- 给
li设display: table-cell+vertical-align: middle - 同时设
line-height和容器高度一致（如height: 2em） - 但此方案下，若
li内有或换行，vertical-align会失效，序号仍贴顶 - 且
table-cell会破坏默认列表语义和可访问性（屏幕阅读器可能跳过序号）
flex + ::marker 在现代浏览器中仍受限
Chrome 110+ 和 Safari 16.4+ 支持 li::marker { display: flex; align-items: center; }，但实际效果不稳定：
-
::marker不接受width、height或padding，只能调font-size和margin -
align-items在部分版本中被忽略，尤其当li有line-height时 - Firefox 目前完全不支持
::marker的布局属性，写了也白写 - 所以不要押注
::marker做垂直居中，它目前只是装饰性增强，不是功能性方案
真正要稳，就别碰原生 marker——手动造序号，用 flex 控制整体对齐。最容易被忽略的是：序号和文本之间的视觉平衡靠的是 margin-right 和 min-width 的组合，而不是对齐属性本身。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
