使用CSS在视口中垂直居中 [英] Vertically center in viewport using CSS

问题描述

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

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 。方法我只看到了支持在另一个< div> li> div 的高度未知。

• The div must 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 div is not known.

• div 必须与右边对齐。


• div 有一个固定宽度。


• div 必须支持填充。


• 其他元素将放置在网页上。 div 充当菜单。


• div必须支持背景颜色/图片。

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

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

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

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

但是，nav的中间，而不是导航的中间

However, the top of the nav is in the middle, not the middle of the nav.

有一些技术可以让我将 div 这些约束？

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

推荐答案

本文可能有帮助：

http://www.jakpsatweb.cz/css /css-vertical-center-solution.html

我使用它之前似乎在Safari / Firefox中工作。

I've used it before it seems to work in Safari/Firefox.

这篇关于使用CSS在视口中垂直居中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！