使用 CSS 在视口中垂直居中

Question

我希望在视口（浏览器窗口）中垂直居中

，而不求助于 Javascript（仅限纯 HTML 和 CSS）。 我有几个限制：

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

其他限制：

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

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

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

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

是否有某种技术可以让我将 div 与这些约束居中？

Answer 1

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

好吧，迟到总比不到好！

您真的已经接近解决方案了。 我会用 transform:translate()< /code>：

#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>

Answer 3

如果该项目设置为position:fixed或position:absolute：

顶部：50%；   左：50%；   变换：翻译（-50%，-50%） 
  

如果该项目设置为位置：相对，请使用：

顶部边距：50%；   左边距：50%；   变换：翻译（-50%，-50%） 
  

更多信息位于源。）

---

示例：

运行代码段，然后调整此页面的大小（或旋转设备）。 该框保持在“片段视口”的中心。

.myContainer {  
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border: 5px solid RebeccaPurple;
}

.myThing {
  width: 100px;
  height: 100px;
  background-color: CornflowerBlue;
}

<div class="myContainer">
  <div class="myThing myContents">
  </div>
</div>

Answer 4

最简单的方法是不使用 div - 使用包含一行和一个单元格的 table。 不幸的是，CSS 不支持垂直对齐，你会发现自己需要在墙上和天花板上编码来完成它。

我理解反对我刚刚提出的语义论点 - 在大多数情况下我是语义标记的支持者。 不过，我也相信使用正确的工具来完成正确的工作。 我认为在这种情况下最好牺牲一点纯度以获得可行的简单解决方案。