Twitter bootstrap 使导航垂直对齐固定在中间

我想做一个垂直导航，固定在右边，在中间的所有设备上显示。我创建了一个简单的，但它不是完美的工作。如何在所有设备中使导航固定在中间。现在它不能在小屏幕上工作

<header class="header" id="nav">
    <ul class="nav nav-pills col-md-8 col-sm-12 col-xs-12" id="main-menu">
    <li class="active">
        <a href="#home">
            <h2>Home</h2> <i class="fa fa-circle"> </i>
        </a>
    </li>
    <li class="">
        <a href="#about">
            <h2>About</h2> <i class="fa fa-circle"></i>
        </a>
    </li>
</ul>
</header>

这里是链接

---

提前感谢

设置导航宽度的百分比，使其在不同屏幕尺寸下保持响应，然后使用margin:auto将其居中。

垂直居中在我的经验中是一个巨大的痛苦。stackoverflow上到处都有大量的答案，可以帮助您获得恰到好处的css

---

就我个人而言，我发现了一个很棒的代码生成器，它几乎一直在处理我的问题。这至少有助于使您垂直对齐，以便您可以更轻松地进行其他样式设置。

您可以在父div上使用以下代码：

 .vertical-middle {
    display: table-cell;
    float: none;
    vertical-align: middle;
  }

---

那么你的问题到底是什么？我希望所有设备的导航都在中间。你可以尝试

变换原点：50%-50%。但是，经过2d/3d变换后，对齐成为一项艰巨的工作。你可以在photoshop上翻转按钮，然后按常规方式将它们放在你的网站上。此外，你确实使用了
边距底部：100px
使按钮彼此远离，这不适合任何移动设备。我确实翻转了整个列表，而不是分开的每个项目，以删除
页边距底部：100px
这不是宽度的问题。大约是高度。