如何让列表计数器在紫色圆圈内垂直居中且保持圆圈位置不变？

问题分析 #

你遇到的核心矛盾是：紫色圆圈已经和列表项文本完美垂直居中，但圆圈内的计数器数字却偏移到底部。直接调整padding-bottom会扭曲圆圈的尺寸，移除top和transform又会让圆圈本身错位——这是因为当前样式只处理了圆圈相对于列表项的位置，却没单独处理圆圈内部数字的垂直对齐。

解决方案 #

我们可以通过两种方式修复这个问题，核心思路是单独处理计数器数字在圆圈内的居中，同时保留圆圈相对于列表项的垂直位置：

方法1：用Flex布局实现精准居中

修改ol li::before的样式，借助Flex布局让数字自动在圆圈内水平、垂直双居中，这种方式直观且不会影响圆圈尺寸：

ol {
 list-style: none;
 counter-reset: mycounter;
 font-size: calc(0.5em + 2.3vw);
 padding-left: 2.7em;
 border: 1px solid red;
}
ol li {
 counter-increment: mycounter;
 position: relative;
 border: 1px solid green;
 --size: calc(0.5em + 2.3vw);
 line-height: calc(var(--size) + 0.5em);
}
ol li::before {
 content: counter(mycounter);
 position: absolute;
 top: 50%;
 transform: translate(0, -50%);
 color: black;
 font-weight: bold;
 border-radius: 50%;
 --size: calc(0.5em + 2.3vw);
 left: calc(-1 * var(--size) - 0.5em);
 width: var(--size);
 height: var(--size);
 /* 添加Flex布局属性实现内部居中 */
 display: flex;
 align-items: center;
 justify-content: center;
 border: 1px solid purple;
}

方法2：调整伪元素的行高适配高度

利用单行文本垂直对齐的特性，让伪元素的line-height等于它的高度，数字会自动居中，这种方式兼容性更好：

ol {
 list-style: none;
 counter-reset: mycounter;
 font-size: calc(0.5em + 2.3vw);
 padding-left: 2.7em;
 border: 1px solid red;
}
ol li {
 counter-increment: mycounter;
 position: relative;
 border: 1px solid green;
 --size: calc(0.5em + 2.3vw);
 line-height: calc(var(--size) + 0.5em);
}
ol li::before {
 content: counter(mycounter);
 position: absolute;
 top: 50%;
 transform: translate(0, -50%);
 color: black;
 font-weight: bold;
 border-radius: 50%;
 --size: calc(0.5em + 2.3vw);
 left: calc(-1 * var(--size) - 0.5em);
 width: var(--size);
 height: var(--size);
 text-align: center;
 /* 设置行高等于高度实现垂直居中 */
 line-height: var(--size);
 border: 1px solid purple;
}

原理说明 #

• 第一种方法用Flex布局的双居中属性，完全脱离外部line-height的影响，是现代布局中最可靠的居中方式。
• 第二种方法利用了CSS行内元素的垂直对齐规则：当行高与元素高度一致时，单行文本会自动落在垂直中线位置，适合需要兼容老浏览器的场景。

两种方案都保留了top: 50%和transform: translate(0, -50%)，确保圆圈相对于列表项的垂直位置不变，只修正了内部数字的偏移问题。

内容的提问来源于stack exchange，提问作者HexenSage