使用 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%);
}

根据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%);
}

这里有一个 sn-p 来展示给你看：

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

top: 50%; left: 50%; transform: translate(-50%, -50%)

如果项目设置为position: relative，使用：

margin-top: 50%; margin-left: 50%; transform: translate(-50%, -50%)

（更多信息请访问the source。）

---

示例：

运行 sn-p 然后调整此页面的大小（或旋转设备）。该框在“sn-p 视口”中居中。

.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 不支持垂直对齐，您会发现自己在墙上和天花板上编写代码来完成它。

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