垂直对齐固定导航CSS

Question

我对菜单的正确对齐有问题。我试图将其与边缘垂直居中，垂直对齐，但没有结果。

以下是HTML代码：

<nav>
    <ul>
        <li><a href="#"><i class="fa fa-bars fa-2x" aria-hidden="true"></i></a></li>
        <li><a href="#"><i class="fa fa-rocket fa-2x" aria-hidden="true"></i></a></li>
    <ul>
</nav>

CSS代码：

nav {
    position: fixed;
    bottom: 0;
    left: 10%;
    right: 10%;
    width: 80%;
    height: 3rem;
    background: #292929;
    border-right: 1px solid rgba(255,255,255,0.1);
}

nav ul {
    list-style: none;
}

nav ul li {
    display: inline-block;
    text-align: center;
    margin: auto 1rem;
}

nav ul li i {
    display: block;
    color: #fff;
}

nav ul li i a {
    text-decoration: none;
}

使用此代码的网络照片：

https://gyazo.com/d520c343ceffce688bf3e4333e9f2fba

我需要什么：

https://gyazo.com/07217a263738281885e3a0fe8053a152

必须以红线为中心。

提前致谢！