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

这是一个片段，可以在行动中向您展示：

＆＃13;

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

＆＃13;

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

＆＃13;

希望它仍与您相关！（我开玩笑的是谁，已经 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

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

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

Answer 4

如果该项目设置为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。）

示例：

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

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

使用CSS在视口中垂直居中

4 个答案:

示例：