【css】列表的标号怎么实现居中对齐？

在 CSS 中，::marker（列表项前面的项目符号，如 ·、◦、1.、→ 等）的默认垂直对齐方式通常是靠近文本基线（baseline）略偏下 ，在很多字体和浏览器下看起来就像在"行的底部"。要想让 marker 垂直居中对齐到当前行的中间，最可靠的做法是使用 vertical-align: middle 结合一些小技巧。

最简单且最兼容的方法（推荐）

css 复制代码

li {
  /* 让 ::marker 相对于行高垂直居中 */
  vertical-align: middle;
  
  /* 可选：给 li 加一点内间距，避免 marker 太贴文字 */
  padding-inline-start: 0.4em;
}

/* 如果上面还不够完美，再强制让 marker 真正垂直居中 */
li::marker {
  vertical-align: middle;
  
  /* 或使用更强的居中方式（现代浏览器） */
  /* vertical-align: -0.15em; */   /* 微调值，根据字体不同调整 */
}

但实际上 ::marker 本身对 vertical-align 的支持有限，真正起作用的是给 <li> 本身设置 vertical-align: middle，因为 marker 会跟随列表项的垂直对齐方式。

更彻底、效果最好的方案（100% 垂直居中）

css 复制代码

li {
  /* 关键：让 li 本身变成一个垂直居中的 flex 容器 */
  display: flex;
  align-items: center;
  
  /* 恢复原来的布局行为 */
  gap: 0.4em;                    /* 原来 marker 和文字的间距 */
}

/* 隐藏原生的 marker */
li::marker {
  display: none;
  content: "";
}

/* 手动添加一个自定义 marker，完美居中 */
li::before {
  content: "•";                  /* 或 "◦" "→" "★" 等，也可以是数字 */
  color: currentColor;
  font-weight: bold;
  width: 1.2em;                  /* 固定宽度，保持对齐 */
  text-align: center;
  flex-shrink: 0;
  
  /* 如果想要数字自动递增 */
  /* counter-increment: item;
  content: counter(item) "."; */
}

示例完整代码：

html 复制代码

<ul>
  <li>第一行内容，marker 完美垂直居中</li>
  <li>第二行内容也居中了</li>
  <li>即使文字很大也很完美</li>
</ul>

css 复制代码

ul {
  list-style: none;
  padding-left: 0;
}

li {
  display: flex;
  align-items: center;
  gap: 0.5em;
  line-height: 1.6;   /* 行高随意，都会居中 */
}

li::before {
  content: "•";
  color: #2ea44f;
  font-size: 1.2em;
  flex-shrink: 0;
}

总结几种方案对比

方法	是否完美居中	兼容性	是否保留原生 marker	推荐度
`li { vertical-align: middle }`	接近居中	极好	是	★★★☆☆
`li::marker { vertical-align: middle }`	基本无效	一般	是	★☆☆☆☆
flex + 自定义 `::before`	完美居中	现代浏览器	否（手动实现）	★★★★★（推荐）
`list-style-position: inside` + flex	也可，但文字会换行对齐	好	是	★★★★☆

结论：如果你想要真正完美的垂直居中，强烈建议使用 "flex + 自定义 ::before" 的方式，这是目前最稳定、最美观、最可控的方案，几乎所有现代项目都在这样干。