Html 垂直居中列出项目多行ol

我试图将计数器列表相对于列表元素垂直居中，我可以在px中严格地设置边距，但是当更改分辨率时，显示不正确

这是我的HTML

。为什么是ol{
显示：块；
填充：0 26px；
列表样式：无；
溢出：隐藏；
计数器复位：numList；
}
.为什么是ol li{
宽度：43%；
右边距：44px；
显示：内联块；
位置：相对位置；
边缘底部：25px；
垂直对齐：中间对齐；
}
.为什么是李斯潘{
垂直对齐：中间对齐；
}
李：以前{
计数器增量：numList；
内容：计数器（numList）”；
浮动：左；
左-26px；
字体：粗体25px无衬线；
文本对齐：居中；
颜色：#0073d5；
线高：50px；
宽度：50px；
高度：50px；
背景：#fff；
-moz边界半径：999px；
边界半径：999px；
边框：1px实心#0073d5；
保证金：50px 20px 50px 0px；
垂直对齐：中间对齐；
}

Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet，奉献精英。前omnis dolore Inventor qui，doloremque atque，建筑设计师设计了一个非公共腐败的dolorem！该死的，天意的，奥特！

Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet，奉献精英。前omnis dolore Inventor qui，doloremque atque，建筑设计师设计了一个非公共腐败的dolorem！该死的，天意的，奥特！

Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet，奉献精英。前omnis dolore Inventor qui，doloremque atque，建筑设计师设计了一个非公共腐败的dolorem！该死的，天意的，奥特！

Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet，奉献精英。前omnis dolore Inventor qui，doloremque atque，建筑设计师设计了一个非公共腐败的dolorem！该死的，天意的，奥特！

Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet，奉献精英。前omnis dolore Inventor qui，doloremque atque，建筑设计师设计了一个非公共腐败的dolorem！该死的，天意的，奥特！

Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet，奉献精英。前omnis dolore Inventor qui，doloremque atque，建筑设计师设计了一个非公共腐败的dolorem！该死的，天意的，奥特！

稍微修改了您的代码

• 给

  li

  一个左边距
• 相对定位

  li

  的伪元素，将其向左移动一点

你自己检查一下

。为什么是ol{
显示：块；
填充：0 26px；
列表样式：无；
溢出：隐藏；
计数器复位：numList；
}
.为什么是ol li{
位置：相对位置；
宽度：43%；
左边距：60像素；
右边距：44px；
显示：内联块；；
位置：相对位置；
边缘底部：25px；
垂直对齐：中间对齐；
}
.为什么是李斯潘{
垂直对齐：中间对齐；
}
李：以前{
计数器增量：numList；
内容：计数器（numList）”；
位置：绝对位置；
左：-60px；
字体：粗体25px无衬线；
文本对齐：居中；
颜色：#0073d5；
线高：50px；
宽度：50px；
高度：50px；
背景：#fff；
-moz边界半径：999px；
边界半径：999px；
边框：1px实心#0073d5；
保证金：50px 20px 50px 0px；
垂直对齐：中间对齐；
显示：内联块；；
}

Lorem ipsum dolor sit amet。


Lorem ipsum dolor sit amet，奉献精英。前omnis dolore Inventor qui，doloremque atque，建筑设计师设计了一个非公共腐败的dolorem！该死的，天意的，奥特！

Lorem ipsum dolor sit amet。


Lorem ipsum dolor sit amet，奉献精英。前omnis dolore Inventor qui，doloremque atque，建筑设计师设计了一个非公共腐败的dolorem！该死的，天意的，奥特！

Lorem ipsum dolor sit amet。


Lorem ipsum dolor sit amet，奉献精英。前omnis dolore Inventor qui，doloremque atque，建筑设计师设计了一个非公共腐败的dolorem！该死的，天意的，奥特！

Lorem ipsum dolor sit amet。


Lorem ipsum dolor sit amet，奉献精英。前omnis dolore Inventor qui，doloremque atque，建筑设计师设计了一个非公共腐败的dolorem！该死的，天意的，奥特！

Lorem ipsum dolor sit amet。


Lorem ipsum dolor sit amet，奉献精英。前omnis dolore Inventor qui，doloremque atque，建筑设计师设计了一个非公共腐败的dolorem！该死的，天意的，奥特！

Lorem ipsum dolor sit amet。


Lorem ipsum dolor sit amet，奉献精英。前omnis dolore Inventor qui，doloremque atque，建筑设计师设计了一个非公共腐败的dolorem！该死的，天意的，奥特！

您可以在

span

中使用

flex

和

height:100%

来创建伪元素

。为什么是ol{
显示：块；
填充：0 26px；
列表样式：无；
溢出：隐藏；
计数器复位：numList；
}
.为什么是ol li{
宽度：43%；
右边距：44px；
显示：内联块；
位置：相对位置；
边缘底部：25px；
垂直对齐：中间对齐；
}
.为什么是李斯潘{
垂直对齐：中间对齐；
显示器：flex；
}
李：以前{
计数器增量：numList；
续