Html 父母而非祖父母的CSS百分比定位

我有一个元素，在父母和祖父母之间。我试图使用

位置：绝对值
和
顶部：50%
将元素放置在父元素的中间位置。但是，该元素在祖父母元素的基础上出现了50%。为什么会这样

这是我的讽刺：

#cons
  background: #242424
  border-right: 1px solid white
  width: $leftwidth
  margin: 0
  padding: 0
  height: calc(100% - 81px)
  overflow-y: scroll
#cons > li
  width: 100%
  height: 50px
  background-color: #212121
  border-bottom: 1px solid white
  display: block
#cons > li img
  width: 40px
  height: 40px
  border-radius: 40px
  margin: 0
  margin-top: 25px
  transform: translateY(-50%)
  display: inline
#cons > li span
  display: inline
  height: 5px
  position: absolute
  top: 50%

这是我的哈巴狗：

ul(id='cons')
      li
        img(src='download.jpg')
        span Hello World

我试图居中的元素是span元素saying Hello World
定位元素的定位上下文（
绝对的
/
相对的
/
固定的
/s
滴答的
-除了
静态的
）是最接近的父元素，而不是
静态的
（默认）。在
li
上设置
position:relative
：

#cons > li
  position: relative
  width: 100%
  height: 50px
  background-color: #212121
  border-bottom: 1px solid white
  display: block

请发布编译后的CSS和HTML。如果您将parent设置为position:relative，则它将是引用，否则它将是最接近的父级，此处为HTML by defaut