使用CSS在视口中垂直居中

Question

我希望<div>在视口(浏览器窗口)中垂直居中,而不需要使用Javascript(仅限纯HTML和CSS).我有几个限制:

• 在div必须垂直于视口的中心. 方法我看到只支持在另一个内部支持<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%);
}

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

Answer 2

您可以将其用作解决方案之一。

   <style>
   #containter {
     height: 100vh; //vh - viewport height
     display: flex;
     flex-direction: column;
     align-items: center; 
     justify-content: center;
   }
   #content {}
  </style>

 <div id="containter">
  <div id="content">
    any text<br>
    any height<br>
    any content, for example generated from DB<br>
    everything is vertically centered
 </div>
</div>