css - 使用 CSS 在视口中垂直居中

Question

我希望<div>在视口（浏览器窗口）中垂直居中，而不使用 Javascript（仅限纯 HTML 和 CSS）。我有几个限制：

• div必须在视口中垂直居中。 我见过的方法只支持在 another 中居中<div>，这不是我想要的。
• 的高度div是未知的。

其他约束：

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

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

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

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

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

Answer 1

What's that? Taking 8 years to get the answer to a problem is too much?

Well, better late than never!

You got really close to the solution. I'd do it with transform: translate():

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

According to Can I use?, it is supported by everything except for IE8- and Opera Mini (which, to be honest, is a pretty good support).

I'd recommend you overkill it a bit and just add all of the vendor prefixes (just to make sure!):

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

Here's a snippet to show it to you in action:

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

Hopefully it's still relevant to you! (who am I kidding, it's been 8 years)

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

If the item is set to position: fixed or position: absolute:

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

If the item is set to position: relative, use:

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

(More info at the source.)

---

Example:

Run the snippet and then resize this page (or rotate device). The box stays centered in the "snippet viewport".

.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

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

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