爲什麼我的容器沒有進入中心

我想在屏幕中心（水平和垂直）打開一個div。爲什麼我的容器沒有進入中心

var documnetWidth = $(document).width(), 
    documentHeight = $(document).height(), 
    widgetFormHeight = widgetForm.height(), 
    widgetFormWidth = widgetForm.width(); 

widgetForm.css({ 
    top: documentHeight/2 - widgetFormHeight/2, 
    left: documnetWidth/2 - widgetFormWidth/2 
});

我的小部件水平居中但垂直需要一些偏移。

來源

2012-09-01 nitesh sharma

試試這個：而不是

documentHeight = $(window).height(),

：

documentHeight = $(document).height(),

你有它的方式，你都拿到文檔的高度可能會大於或小於瀏覽器的高度。

然後允許文檔多遠當前滾動的：

top: documentHeight/2-widgetFormHeight/2 + $(document).scrollTop(),

演示：http://jsfiddle.net/vULHL/

來源

2012-09-01 06:52:38 nnnnnn

$（窗口）不能解決它。 –

如果確定，他可以嘗試固定位置，或者按照建議使用scrollTop。 – sabithpocker

答案已更新，以便按照演示允許當前文檔的滾動狀態。或者'position：fixed'會按照sabithpocker的建議來做（我最初沒有想到，因爲我太習慣於支持某個必須在IE6中運行的應用程序）。 – nnnnnn

你可以做到這一點

定義大小的DIV和位置固定，像這樣的：

div { 
    position: fixed; 
    top: 50%; 
    left: 50%; 
    width: 200px; 
    height: 100px; 
    margin: -100px 0 0 -50px; 
    z-index: 99; 
}

或者，如果你不想把它absolutl ÿ定位，可以給它的寬度，並將其設置爲：

div { margin: 0 auto; }

來源

2012-09-01 07:01:40 rahul

你的解決方案需要固定定位，如果你使用絕對定位，你應該考慮scrollTop也檢查@nnnnnn回答 – sabithpocker

我已經更新了我的答案 – rahul

+1爲純CSS解決方案 – sabithpocker

絕對居中DIV無寬度或高度：

http://jsfiddle.net/dFkXq/1/

和動作像一個固定元件。

來源

2012-09-01 16:49:16 user1626664

爲什麼我的容器沒有進入中心

回答

相關問題