css - 使用 CSS 在视口(viewport)中垂直居中

Question

我希望垂直居中 <div>在视口(viewport)(浏览器窗口)中，而不求助于 Javascript(仅限纯 HTML 和 CSS)。我有几个限制条件:

• div必须在视口(viewport)中垂直居中。 我见过的方法只支持在另一个内部居中 <div> ，这不是我想要的。
• div 的高度未知。

其他约束:

• div必须右对齐。
• div具有恒定的宽度。
• div必须支持填充。
• 其他元素将放置在网页上。 div充当菜单。
• div 必须支持背景颜色/图像。

这让我接近我想要的，但不完全是:

#nav {
    position: fixed;
    right: 0;
    top: 50%;
}

但是，导航的顶部在中间，而不是导航的中间。

是否有一些技术可以让我将 div 居中？有这些限制吗？

Answer 1

那是什么？花费8 年 来获得问题的答案是否太多了？

迟到总比不到好!

您真的接近了解决方案。我会用 transform: translate() 来做:

#nav {
    position: fixed;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
}

根据 Can I use? , 除了 IE8- 和 Opera Mini 之外的所有东西都支持它(老实说，这是一个很好的支持)。

我建议您稍微矫枉过正，只添加所有供应商前缀(只是为了确保!):

#nav {
    position: fixed;
    right: 0;
    top: 50%;

    -webkit-transform: translateY(-50%);
       -moz-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
         -o-transform: translateY(-50%);
            transform: translateY(-50%);
}

这里有一个片段向您展示了它的实际效果:

#nav {
    right: 0;
    top: 50%;
    position: fixed;
    -webkit-transform: translateY(-50%);
       -moz-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
         -o-transform: translateY(-50%);
            transform: translateY(-50%);

    background-color: #ccc;
    padding: 20px;
}

<div id="nav">
    ABC<br/>
    DEFGH<br/>
    IJKLMNO<br/>
    PQRS<br/>
    TUVWXYZ
</div>

希望它仍然与您相关! (我在跟谁开玩笑，已经8 年)