垂直居中，未知高度，頁面上的其他內容

好的，所以這基本上是通常的「如何垂直居中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

垂直居中，未知高度，頁面上的其他內容

回答

相關問題