垂直居中，未知高度，页面上的其他内容 [英] Vertical Centering, Unknown Height, Other Content on Page
问题描述
好的，所以这基本上是通常的如何垂直居中与CSS问题，但有一些捕获。
-
没有Javascript。 HTML和CSS。 CSS3很好，只要它得到当今浏览器的支持。
-
元素的内容，因此高度是不知道的。它可以是从几十到几百个像素的任何地方。在未来，我甚至可能有一个脚本在里面添加和删除元素，所以它可能会随着用户与之交互而改变高度。
-
在页面上 - 左侧的导航栏和顶部的菜单。
我使用的方法是使用display的three-container-div方法：表格单元格，如下所示： http://www.jakpsatweb.cz /css/css-vertical-center-solution.html 这解决了问题1和2，但不是3.
http://imgh.us/vcenter.jpg 显示了设计和问题。黄色框是最内侧的容器。整个页面周围的红色和绿色虚线框（由于JPEG编码而变得有些模糊）分别是最外面的和中间的容器。 （out-of-place footer是一个单独的问题...）
这个布局的问题是外部容器覆盖整个页面，这使得它不可能点击导航栏，因为它现在在下这些容器。 Z-index可以将它们移动到底部，但随后它变得不可能点击红色框内的任何内容，因为它现在在页面的主要内容框下。 （XHTML只允许在< body>内的单个元素，所以我只是将它包装在一个< div>。）即使外面的两个容器有z-index：-100和内部容器有z-索引：200，它仍然结束在主要内容框下由于某种原因。 （我尝试了各种位置属性。）
我见过的唯一解决方案是一个新的CSS3属性指针事件，理论上允许我做事件通过透明的容器，如我所料;但是这似乎是相当新的，并且还不支持SVG以外的大多数浏览器，我想我会有与Z索引相同的麻烦。
我确实需要元素在页面的中心，而不是内容区域的中心（即在计算位置时忽略导航栏），因此将容器放在内容区域中不是一个理想的解决方案。 （我也在登录页面上使用这种风格，没有导航栏，如果居中元素相对于不总是可见的导航栏居中，它看起来有点奇怪。）
总之，我需要的是在不使用Javascript的情况下，在页面上具有未知高度的元素，其边缘具有其他内容，而不使用不可见层覆盖任何内容（因此使其不可点击）。
虽然这显然是一个老问题，OP无疑解决了这个问题，我想添加一个链接到Chris Coyier的关于如何处理这个问题的未来的旅行者需要一个类似的解决方案的奇妙的写照。
http://css-tricks.com/centering-in-the-unknown/ p>
Alright, so this is basically the usual "how to vertically center with CSS" question, but with some catches.
No Javascript. HTML and CSS only. CSS3 is fine as long as it's reasonably well supported by today's browsers.
The element's content, and therefore height, is not known. It may be anywhere from a few dozen to a few hundred pixels. In the future I might even have a script adding and removing elements inside, so it may change height as the user is interacting with it.
There is other content on the page - a navigation bar at the left and a menu at the top. These need to be accessible.
The approach I've used is the three-container-div method using display: table-cell, as documented at: http://www.jakpsatweb.cz/css/css-vertical-center-solution.html this solves issues 1 and 2, but not 3.
http://imgh.us/vcenter.jpg shows the design and the problem. The yellow box is the innermost container. The red and green dotted boxes around the entire page (which have become somewhat blurred together due to JPEG encoding) are the outermost and middle containers respectively. (The out-of-place footer is a separate issue...)
The problem with this layout is the outer containers cover the entire page, and this makes it impossible to click on the navbar, because it's now "under" those containers. Z-index can move them to the bottom, but then it becomes impossible to click on anything inside the red box, because it's now "under" the page's main content box. (XHTML only allows a single element inside the <body>, so I've just wrapped it all in a <div>.) Even if the outer two containers have z-index: -100 and the inner container has z-index: 200, it still ends up under the main content box for some reason. (I did try various position attributes.)
The only solution I've seen is a new CSS3 property, pointer-events, that would in theory allow me to make events pass through the transparent containers as I'd expect; however this seems to be quite new and not yet supported by most browsers outside of SVG, and I imagine I'd have the same trouble as with Z-index.
I do want the element at the center of the page, not the center of the content area (i.e. ignoring navbars in the calculation of position), so placing the container inside the content area isn't an ideal solution. (I'm using this style on the login page as well, which has no navbars, and it'd look a bit strange if the "centered" elements were centered relative to a navbar that isn't always visible.)
In summary what I need is to center, without using Javascript, an element of unknown height on a page with other content at its edges, without covering any of the content with an invisible layer (and thus making it unclickable).
While this is obviously an old question and the OP has undoubtedly solved this problem, I figured I'd add a link to Chris Coyier's marvelous write-up on how to deal with this issue for future wayfarers in need of a similar solution.
http://css-tricks.com/centering-in-the-unknown/
这篇关于垂直居中，未知高度，页面上的其他内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
