使用CSS在视口中垂直居中

高度div不详.

其他限制:

在div必须靠右对齐.

在div具有恒定的宽度.

在div必须支持填充.

其他元素将放在网页上.该div充当菜单.

div必须支持背景颜色/图像.

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

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

但是,导航的顶部位于导航的中间,而不是导航的中间.

是否有一些技术可以让我以div这些约束为中心？

那是什么？用了8年才能得到问题的答案太多了？

好吧,迟到总比没有好!

你真的很接近解决方案.我这样做transform: translate():

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

根据我可以使用吗？除了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;
}

    ABC

    DEFGH

    IJKLMNO

    PQRS

    TUVWXYZ