li 标签中的垂直居中链接，是父 ul 高度的 11.11%

Question

我有一个从左侧滑入的菜单。我给这个菜单设置了 100vh 的高度。我放了一个 ul，里面有一些 li（菜单项），每个占 11.11% 的高度（有 9 个菜单项）。

现在，当我将鼠标悬停在上面提到的那些菜单项上时，我还可以从左侧滑入子菜单。子菜单由一个带有 ul 和 li 的 div 组成。该 div 绝对定位，主 ul（如上所述）相对定位（以便每个子菜单出现在同一个位置）有点像这里显示的示例：

https://www.thecodingguys.net/demo/css/css-vertical-menu-multiple-levels.html

问题是我在子菜单中有链接，我无法将它们垂直居中。不同的是，包含子菜单的 div 是主 ul（外菜单）的 80%，而内 li 也是 ul 高度的 11.11%（也是 9 个子菜单项）。我尝试将 li 设置为 position: relative 并将 a 标签设置为 position: absolute with top: 0, bottom: 0, and margin: auto, 0 但这不起作用。这是子菜单的css：

.menu-sub-categories {



    position: absolute;
    display: inline-block !important;
    height: 87%;
    z-index: -1;
    left: -100%;
    width: 100%;
    top: 23%;
    background: grey;
    @include prefix(transition, left 200ms ease-in);

    ul {
        height: 100%;
        margin: 0;
        padding: 0;
    }

    li {
        display: inline-block;
        box-sizing: border-box;
        margin: 0;
        padding: 0;
        width: 100%;
        color: #fff;
        height: 11.11%;
        //border: 2px solid red;



        a {
            color: #fff;
            text-decoration: none;
            cursor: pointer;
            box-sizing: border-box;
            border: 2px solid green;
            display: inline-block;
            width: 100%;
            height: 100%;
            font-size: 17px;
            position: relative;                 

            .text-wrap {    
                box-sizing: border-box;
                    display: inline-block;
                    height: auto;
                    width: auto;
                    top: 0;
                    bottom: 0;
                    margin: auto 0;


            }

            &:hover {
                color: #000;
                cursor: pointer;
                text-decoration: none;
            }
        }




    }





    }



}

如果你想看的话，这里是完整的网站：

http://pilot-mule-43300.bitballoon.com/

非常感谢

Answer 1

将此应用于<a> 内的<span> 标记

span {
   position: relative;
   top: 50%;
   transform: translateY(-50%);
}