如何让有序列表圆形编号在边框内居中且随多行内容垂直居中？

原有代码问题点 #

• 编号伪元素设置了固定top: 0px，导致圆形编号始终锚定在列表项顶部，无法随内容行数变化调整到垂直中点
• 圆形编号仅设置了水平居中，未做垂直居中适配，同时额外添加的padding:4px会撑大固定宽高的容器，导致数字偏移、圆形变形
• 存在重复的li标签样式规则，容易引发样式冲突

修复后完整代码 #

HTML（原有结构无需调整） #

<ol>
  <li>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat
  </li>
  <li>
   Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  </li>
  <li>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat
  </li>
  <li>
   Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </li> 
</ol>

CSS #

ol {
    counter-reset: li; /* 初始化列表计数器 */
    margin-left: 0;
    padding-left: 0;
}

ol > li {
    position: relative; /* 为内部绝对定位的编号提供定位上下文 */
    margin: 0 30% 20px 4.5em; /* 左侧预留编号显示空间 */
    padding: 4px 8px;
    list-style: none; /* 清除默认列表编号 */
    font-size: 20px;
}

ol > li:before {
    content: counter(li); /* 读取计数器值作为编号内容 */
    counter-increment: li; /* 计数器自增 */
    position: absolute;
    /* 核心定位逻辑：相对列表项高度垂直居中 */
    top: 50%;
    transform: translateY(-50%);
    left: -2.5em;
    /* 固定正圆尺寸 */
    width: 50px;
    height: 50px;
    border-radius: 50%;
    /* Flex布局实现数字在圆内完全居中 */
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: blue;
    font-weight: bold;
    font-family: "Helvetica Neue", Arial, sans-serif;
}

实现效果说明 #

• 编号数字在圆形边框内水平、垂直方向完全居中，无偏移
• 圆形编号会自动跟随列表项内容高度调整位置，无论段落占1行、3行还是更多行，都会始终对齐到段落内容的垂直中点
• 圆形无变形，样式统一

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