使用 CSS 在视口中垂直居中

Vertically center in viewport using CSS

提问by strager

I am looking to vertically center a <div>in the viewport (browser window) without resorting to Javascript (pure HTML and CSS only). I have several constraints:

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

• The divmust be centered vertically in the viewport.Methods I have seen only support centering inside another <div>, which is not what I want.
• The height of the divis not known.

• 在div必须垂直于视口的中心。我见过的方法只支持在另一个内部居中<div>，这不是我想要的。
• 其高度div不详。

Other constraints:

其他约束：

• The divmust be aligned to the right.
• The divhas a constant width.
• The divmust support padding.
• Other elements will be placed on the web page. The divacts as a menu.
• The div must support a background colour/image.

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

This gets me close to what I want, but not exactly:

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

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

However, the topof the nav is in the middle, not the middleof the nav.

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

Is there some technique which allows me to center my divwith these constraints?

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

回答by Matheus Avellar

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

那是什么？花8 年时间才能得到一个问题的答案是否太过分了？

Well, better late than never!

好吧，迟到总比不到好！

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

您已经非常接近解决方案了。我会这样做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).

根据我可以使用吗？，除了 IE8- 和 Opera Mini（老实说，这是一个很好的支持）之外的所有东西都支持它。

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)

希望它仍然与您有关！（我在开玩笑，已经8年了）

回答by vikas etagi

you can use this as one of the solution.

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

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

回答by ashleedawg

If the item is set to position: fixedor 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%)

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

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

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

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>

回答by Andrew Hare

The easiest way is not to use a div- use a tablewith one row and one cell. Vertical alignment is woefully unsupported in CSS and you will find yourself coding up the wall and across the ceiling to accomplish it.

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

I understand the semantic argument against what I have just proposed - I am a proponent of semantic markup in most cases. However I also believe in using the right tool for the right job. I believe it is best to sacrifice a little purity in this case for a simple solution that will work.

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