好吧，所以这基本上是通常的“如何垂直居中CSS”问题，但有一些捕获。
没有Javascript。仅限HTML和CSS。 CSS3很好，只要今天的浏览器能够得到相当好的支持。
元素的内容以及高度是未知的。它可能是从几十到几百像素的任何地方。在将来，我甚至可能会在内部添加和删除元素，因此可能会在用户与其进行交互时更改高度。
页面上还有其他内容 - 左侧是导航栏，顶部是菜单。这些都需要访问。
我使用的方法是使用display：table-cell的three-container-div方法，如下所述：http://www.jakpsatweb.cz/css/css-vertical-center-solution.html这解决了问题1和2，但没有解决问题。
http://imgh.us/vcenter.jpg显示了设计和问题。黄色框是最里面的容器。整个页面周围的红色和绿色虚线框（由于JPEG编码而变得有些模糊）分别是最外层和中间容器。 （不合适的页脚是一个单独的问题......）
此布局的问题是外部容器覆盖整个页面，这使得无法单击导航栏，因为它现在位于这些容器的“下方”。 Z-index可以将它们移动到底部，但是之后无法点击红色框内的任何内容，因为它现在位于页面主要内容框的“下方”。 （XHTML只允许＆lt; body＆gt;中的单个元素，所以我只是将它全部包装在＆lt; div＆gt;中。）即使外部两个容器具有z-index：-100且内部容器具有z-索引：200，由于某种原因它仍然在主内容框下。 （我确实尝试过各种位置属性。）
我见过的唯一解决方案是一个新的CSS3属性，指针事件，理论上允许我按照我的预期让事件通过透明容器;然而，这似乎是相当新的，并且还没有得到SVG之外的大多数浏览器的支持，我想我会遇到与Z-index相同的麻烦。
我确实希望元素位于页面的中心，而不是内容区域的中心（即在计算位置时忽略导航栏），因此将容器放在内容区域内并不是理想的解决方案。 （我也在登录页面上使用这种样式，它没有导航栏，如果“居中”元素相对于不总是可见的导航栏居中，看起来有点奇怪。）
总之，我需要的是在不使用Javascript的情况下，在页面上以其他内容为边缘的未知高度的元素居中，而不用不可见的图层覆盖任何内容（从而使其不可点击）。 / p>
答案 0 :(得分：2)
虽然这显然是一个老问题而且OP无疑已经解决了这个问题，但我想我会添加一个链接到Chris Coyier关于如何为需要类似解决方案的未来旅行者处理这个问题的奇妙文章
