如何在屏幕中央浮動div

Question

我試圖在HTML5中創建一個由div組成的視圖，該視圖顯示在頁面中央，而背景灰顯。就像Silverlight子窗口一樣。我有一個可怕的時間試圖讓這個工作。

Answer 1

你可以很容易地用一些基本的CSS來做到這一點。這只是CSS的一部分，而不是JavaScript來動畫或切換。但它應該足以讓你開始。

CSS

.div { 
    position:absolute; 
    top:300px; 
    width:300px; 
    height:260px; 
    left:50%; 
    z-index:1000; 
    margin-left: -150px; /* negative half the width of the div */ 
} 

.background { 
    background:#000; 
    opacity:0.5; 
    position:fixed: 
    width:100%; 
    height:100%; 
    z-index:999; 
} 

HTML

<div class="div"> 
    My Content 
</div> 
<div class="background "></div> 

Answer 2

這是爲了使頁面居中900px寬，你添加到您的div元素：

width:900px;margin-right:auto;margin-left:auto; 

爲背景，您需要將以下樣式添加到您body元素

color:gray;padding:0px;margin:0px; 

---

你必須包括以中心的元素的寬度。如果不包含寬度，則margin-right:auto; margin-left:auto;將不起作用！