ol列表项垂直居中无单一解法，需先明确对齐容器：常见方案是父容器设flex+align-items:center并重置ol默认边距；单个li内居中宜用display:flex+align-items:center；绝对定位仅限特殊场景且须谨慎使用。
直接让 ol 列表项（li）“垂直居中”没有单一解法——因为“垂直居中”必须相对于某个容器，而 ol 本身不是天然的对齐上下文。你真正要解决的，是：让 ol 或它的某一层父容器高度可控，再让整个列表或其中某个 li 在该容器内垂直居中。下面分场景给出可落地的方案。
让整个 ol 在父容器中垂直居中（最常见）
这是多数人实际想做的：比如一个固定高宽的卡片里，希望编号列表整体上下居中显示。
- 父容器必须有明确高度（如
height: 300px或min-height: 200px），否则 flex 的交叉轴无参考长度 - 给父容器设
display: flex+align-items: center，而不是给ol自身加 -
ol默认有margin-block-start/end（通常 1em），需重置，否则视觉上会偏移
.container {
height: 300px;
display: flex;
align-items: center;
justify-content: center; /* 水平也居中 */
}
<p>.container ol {
margin: 0; /<em> 清除默认上下外边距 </em>/
padding-inline-start: 0; /<em> 清除左侧编号缩进（Chrome/Firefox） </em>/
list-style-position: inside; /<em> 可选：避免编号被裁切 </em>/
}
让单个 li 在其行内高度中垂直居中（如多行文本+图标混排）
当 li 内容不只是一行文字（比如含 img、button 或多段 p），又想让内部元素在 li 行高范围内垂直居中，vertical-align 就不可靠了——它只对 inline/inline-block 元素有效，且基准是“行框基线”。
- 把
li设为display: flex，再用align-items: center - 避免给
li设line-height模拟居中，多行时会失效 - 若
li高度由内容撑开，建议加min-height防止过矮导致“看不出居中”
ol li {
display: flex;
align-items: center;
min-height: 48px; /* 提供稳定对齐基准 */
padding: 8px 0;
}
<p>ol li img,
ol li button {
margin-right: 8px;
}
用 position: absolute 精确控制单个 li 垂直位置（慎用）
仅适用于需要像素级定位的极少数情况（如动画锚点、表单验证提示），不推荐用于常规布局。容易因父容器未设 position: relative 而相对 viewport 定位，滚动即飘走。
立即学习“前端免费学习笔记（深入）”；
- 父容器（如
ol）必须设position: relative -
li设position: absolute后脱离文档流，会覆盖其他li，需手动管理z-index和尺寸 - 动态内容（如异步加载文本）会导致位置计算错误，出现短暂闪动
ol {
position: relative;
height: 200px;
}
<p>ol li.target {
position: absolute;
top: 50%;
transform: translateY(-50%);
left: 0;
width: 100%;
}
真正容易被忽略的是：ol 的默认样式（尤其是 margin-block 和 padding-inline-start）在不同浏览器中表现不一致，不重置就谈不上“精准居中”。别只盯着对齐属性，先清掉这些隐性干扰项。
