垂直居中，未知高度，页面上的其他内容

好的，所以这基本上是通常的“如何垂直居中CSS”的问题，但有一些捕获。垂直居中，未知高度，页面上的其他内容

没有Javascript。仅限HTML和CSS。只要今天的浏览器能很好地支持CSS3就行。
元素的内容以及高度是未知的。它可能在几十到几百像素的任何地方。将来我甚至可能会有一个脚本添加和删除里面的元素，所以当用户与它交互时它可能会改变高度。
页面上还有其他内容 - 左侧导航栏和顶部菜单。这些需要可以访问。

我使用的方法是使用显示三容器的div方法：表单元，如在记载：http://www.jakpsatweb.cz/css/css-vertical-center-solution.html这解决了问题1和2，但不3.

http://imgh.us/vcenter.jpg节目设计和问题。黄色框是最内层的容器。整个页面周围的红色和绿色虚线框（由于JPEG编码已经变得有些模糊）分别是最外层和中层容器。（不合理的页脚是一个单独的问题...）

这个布局的问题是外部容器覆盖整个页面，这使得无法点击导航栏，因为它现在是“下“那些容器。 Z-index可以将它们移动到底部，但是随后点击红色框内的任何内容变得不可能，因为它现在位于页面的主要内容框“下面”。（XHTML只允许<内部的单个元素>，因此我只是将它全部包装在<div>中。）即使外部两个容器具有z-index：-100且内部容器具有z-index： 200，由于某种原因它仍然在主要内容框下结束。（我尝试了各种位置属性。）

我见过的唯一解决方案是一个新的CSS3属性，pointer-events，它理论上允许我按照我的意愿使事件通过透明容器;然而，这似乎是相当新的，并且SVG之外的大多数浏览器都不支持，我想我会遇到与Z-index相同的麻烦。

我确实希望元素位于页面中心，而不是内容区域的中心（即忽略位置计算中的导航栏），因此将容器放置在内容区域内不是理想的解决方案。（我在登录页面也使用了这种风格，它没有导航栏，如果“居中”元素相对于不总是可见的导航栏居中，它会显得有点奇怪。）

总之，我需要的是在没有使用Javascript的情况下，在其边缘具有其他内容的页面上未知高度的元素居中，而不覆盖具有不可见层的任何内容（并且因此使其不可见）。

来源

2010-11-13 Rena

这些“捕获”是几乎相同的通常的窘境。 – Ben 2010-11-16 06:31:45

-1

转到此链接。非常有据可查的和容易的CSS方式来做到这一点。

http://www.wpdfd.com/editorial/thebox/deadcentre4.html

来源

2010-11-13 03:19:31 Tom

我只是摆弄这一段时间，仍然无法找到任何方法使其工作。该示例使用固定高度的元素和像素定位。我不能那样做;我的元素是可变的高度。我已经管理的最好的是这样的：http://imgh.us/vcenter2.png – Rena 2010-11-22 01:41:50

很明显，我们不能在评论中有换行符。无论如何，在该图像中，外部容器位于顶部：50％，左侧：50％;那么中间容器在理论上使用margin-top：-50％和margin-left：-50％来左右移动父代大小的一半（从而到页面中间）。相反，由于某种原因，它最终会在那里出现。 – Rena 2010-11-22 01:43:56

链接示例适用于已知高度的元素。问题在于身高不明的人。 – 2011-07-19 13:27:24

虽然这显然是一个老问题和OP无疑解决了这个问题，我想我会添加一个链接就如何处理这一问题对未来过路人克里斯Coyier的奇妙写了需要类似的解决方案。

http://css-tricks.com/centering-in-the-unknown/

来源

2012-04-02 19:31:36

太棒了！感谢分享。似乎在Chrome 27和IE 10中正常工作......对于我目前的工作来说足够好！ – 2013-08-16 03:30:37

垂直居中，未知高度，页面上的其他内容

回答

相关问题