Dead Centered Div

怎樣才能將div居中對齊屏幕而不是頁面。所以當用戶向下滾動一個長頁面時，div仍然是水平和垂直居中的？Dead Centered Div

2011-07-05 Mike

你是什麼意思垂直滾動時的中心？做橫向居中使用'margin：0px auto;' – jchavannes

恰好在屏幕的中心，即使用戶正在向下滾動一個5000px長的頁面。 – Mike

下面是一個純粹的CSS解決方案，請注意百分比和負邊距。

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

來源

2011-07-05 05:37:30 jchavannes

這是一個不錯的清潔解決方案。只是想補充一點，當你正在居中的div是body元素的直接子元素，或者div和body元素之間沒有「定位」祖先時，這將會起作用。 – Beejamin

任何人都知道哪些瀏覽器已經過測試？ jsfiddle鏈接不適合我... –

CSS的<div>：

position: absolute 
left : (centerofpagepixel.x - (width of div /2)); 
top : (centerofpagepixel.y - (height of div/2));

坐落在<div>的使用jQuery以上。

您可以再次使用jQuery計算centerofpagepixel.x和y。可能得到屏幕的寬度/高度和2

來源

2011-07-05 05:24:49 Neeraj

只是追加，這裏的關鍵是位置：絕對的css風格。 – Neeraj

他們分開你也可以嘗試以下操作：

HTML標記：

<div class="classname">text here</div>

CSS：

.classname { 
    position:absolute; 
    left:50%; 
    top:50%; 
    padding:10px; 
    border:1px solid #ccc; 
}

的邊框和填充可以根據需要更改或刪除。另外，確保父容器必須相對定位，即它應該有position:relative。

來源

2011-07-05 05:36:20

這裏是你的代碼

http://www.geekdaily.net/2007/07/04/javascript-cross-browser-window-size-and-centering/

只重視此事件window.onscroll。無需使用jQuery，試試這個

function addEvent(obj,ev,fn) { 
    if(obj.addEventListener) obj.addEventListener(ev,fn,false); 
    else if(obj.attachEvent) obj.attachEvent("on"+ev,fn); 
} 

addEvent(window,"scroll",yourfunction);

好運

來源

2011-07-05 05:42:44

回答

相關問題