如何在頁面中央保留div？

Question

我正在使用jQuery創建一個“對話框”，它應該彈出頁面頂部和頁面中心（垂直和水平）。 我應該如何讓它保持在頁面的中心（即使用戶調整大小或滾動？）

Answer 1

我會用

position: fixed;
top: 50%;
left: 50%;
margin-left: -(dialogwidth/2);
margin-top: -(dialogheight/2);

但是使用此解決方案並且瀏覽器視口大小小於對話框，對話框的部分將無法在頂部和左側訪問，因為它們位於視口之外。 所以你必須決定它是否適合你的對話框大小。

（CSS現在還不知道如何計算。所以那里的小數學必須由你完成。因此你的對話必須是一個你必須知道的固定大小。）

編輯：

哦，是的，如果你也想為IE6提供對話框，你應該這樣做：

#dialog { position: absolute; }
#dialog[id] { position: fixed; }

由於IE6不具備固定位置且不具備屬性選擇器，因此IE6將是唯一將位置設置為絕對位置的人。 （這只會影響滾動行為。絕對停留在頁面中的位置，並固定在瀏覽器中的位置。其余部分類似。）

Answer 2

查看Infinity Web Design的相關內容。

#mydiv {
   background-color:#F3F3F3;
   border:1px solid #CCCCCC;
   height:18em;
   left:50%;
   margin-left:-15em;
   margin-top:-9em;
   position:absolute;
   top:50%;
   width:30em;
}

這是他們使用的CSS，我已經在多個瀏覽器中測試過它。

您會注意到左邊距是負寬度的一半而上邊距是負高度的一半。 這樣可以或多或少地保持定心，將其絕對定位在頂部和左側的50％處。

Answer 3

要將div水平放在中間，我總是把margin：0 auto。 但它不能是浮動元素，在IE中我總是需要放置div然后給它屬性text-align：center，以便內部div水平居中。

Answer 4

如果您知道元素的偏移尺寸（寬度/高度+填充），則可以使用此CSS：

elementContainerSelector {
    position: fixed; /* You'll of course need to handle browsers that don't support fixed positioning */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

elementSelector {
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -[half of offset height]px 0 0 -[half of offset width]px;
}

Hurix的答案也有效，並且還要記住該答案中的警告。

Answer 5

保持邊距左：自動和邊距：自動