通过 css flexbox 和伪元素自定义列表标记，可让项目符号在多行列表项中始终垂直居中于文本行间，而非默认锚定在首行顶部。
通过 css flexbox 和伪元素自定义列表标记，可让项目符号在多行列表项中始终垂直居中于文本行间，而非默认锚定在首行顶部。
在标准 HTML 列表（<ul></ul>/<li>）中，浏览器原生的项目符号（bullets）是内联渲染的，其垂直对齐行为由 line-height 和基线规则决定，无法响应多行文本的高度动态调整——即当 <li> 内容换行为 2 行或 3 行时，原生圆点始终紧贴第一行文字顶部，无法“感知”整体内容高度并居中。
解决该问题的核心思路是：剥离原生标记，用 CSS 伪元素（::before）手动创建可完全控制的自定义标记，并结合 Flexbox 实现垂直居中。
具体实现如下：
li {
display: flex;
align-items: center; /* 关键：使伪元素与多行文本整体垂直居中 */
padding-left: 0; /* 可选：清除原生缩进，避免双重留白 */
list-style: none; /* 必须禁用原生标记 */
}
li::before {
content: "•"; /* 或使用 Unicode："\2022" */
margin-right: 0.75em; /* 控制标记与文本间距 */
font-size: 1em;
}
HTML 结构保持简洁：
- Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam, voluptatem.
- This is a much longer list item that will wrap across three lines on narrow screens — and the bullet stays perfectly centered.
✅ 优势说明：
display: flex + align-items: center使伪元素与整个<li>的内容块（含多行文本）在交叉轴上居中，无论文本是 1 行、2 行还是 N 行；- 伪元素脱离文本流，不受
vertical-align或行高影响，行为完全可控；- 支持响应式：配合
max-width或媒体查询调整li宽度时，居中效果自动保持。
⚠️ 注意事项：
- 若
<li>内含内联元素（如<a></a>、<strong></strong>）且设置了不同line-height或vertical-align，可能干扰 flex 对齐，建议统一设置line-height: normal或确保子元素无额外对齐干扰； - 避免在
li上同时使用text-align: center（水平居中），否则会将整个 flex 容器居中，导致标记与文本一起偏移； - 如需兼容老版本 IE（table-cell 布局或 JS 计算高度——但现代项目中推荐优先采用 Flexbox 方案。
综上，放弃依赖原生 list-style，转而用 flex + ::before 构建标记，是实现多行列表项中项目符号真正垂直居中的简洁、健壮且语义清晰的标准解法。
