【发布时间】：2015-01-13 03:42:26
【问题描述】：
好的，所以这基本上是常见的“如何使用 CSS 垂直居中”问题，但有一些问题。
没有 Javascript。仅限 HTML 和 CSS。只要当今的浏览器对 CSS3 的支持相当好，CSS3 就可以了。
元素的内容和高度未知。它可能是几十到几百像素的任何地方。将来我什至可能会在其中添加和删除元素的脚本，因此它可能会在用户与之交互时改变高度。
页面上还有其他内容 - 左侧的导航栏和顶部的菜单。这些需要可访问。
我使用的方法是使用 display: table-cell 的三容器 div 方法，如记录在：http://www.jakpsatweb.cz/css/css-vertical-center-solution.html 这解决了问题 1 和 2，但不能解决问题 3。
http://imgh.us/vcenter.jpg 显示设计和问题。黄色框是最里面的容器。整个页面周围的红色和绿色虚线框（由于 JPEG 编码而变得有些模糊）分别是最外层和中间的容器。 （不合适的页脚是一个单独的问题...）
这种布局的问题是外部容器覆盖了整个页面，这使得无法点击导航栏，因为它现在位于这些容器的“下方”。 Z-index 可以将它们移动到底部，但随后就无法单击红色框内的任何内容，因为它现在位于页面的主要内容框“下方”。 （XHTML 只允许
中包含单个元素，所以我只是将其全部包裹在我见过的唯一解决方案是一个新的 CSS3 属性，pointer-events，理论上它可以让我按照我的预期让事件通过透明容器；然而，这似乎是相当新的，并且尚不被 SVG 之外的大多数浏览器支持，我想我会遇到与 Z-index 相同的问题。
我确实希望元素位于页面的中心，而不是内容区域的中心（即在计算位置时忽略导航栏），因此将容器放在内容区域内并不是一个理想的解决方案。 （我也在登录页面上使用了这种样式，它没有导航栏，如果“居中”元素相对于不总是可见的导航栏居中，看起来会有点奇怪。）
总而言之，我需要在不使用 Javascript 的情况下将页面上未知高度的元素居中，边缘处有其他内容，而不用不可见的层覆盖任何内容（从而使其无法点击）。
【问题讨论】：
-
这些“陷阱”几乎与通常的困境相同。