如何垂直居中绝对定位的span元素？不使用flex布局

<li style="height: 10px; font-size: 40px;">
    <span style="position: absolute;">40px</span>
</li>

允许给<li>添加position:relative（仅禁用display:flex） #

这是最靠谱的适配方案——毕竟问题只禁止了display:flex，没限制其他<li>样式：

• 给<li>补个position:relative（让<span>的绝对定位以<li>为参照容器）
• 给<span>设置以下样式：

span {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  line-height: 1; /* 避免大字体的行高干扰，保证居中精度 */
}

原理很直接：top:50%把<span>的顶边推到<li>的垂直中线，transform:translateY(-50%)再把<span>往上挪自身高度的一半，刚好卡在<li>的垂直中心，不管<li>的height和font-size怎么变都能适配。

严格只改<span>样式的情况 #

如果完全不能碰<li>的任何样式，做不到。原因：

• 原代码里<span>是position:absolute，没有定位父级的话会相对于<body>这类上层元素定位，根本对齐不了<li>的中心
• 其他不用定位的居中方法（比如vertical-align:middle）需要依赖<li>的行高或定位属性，仅改<span>样式没办法适配任意<li>的height和font-size

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