在頁面上創建一個DIV作爲中心焦點

Question

我希望在頁面上有一個登錄表單。一個例子是here

我知道如何中心我不能工作了一個元素是如何在頁面的中心始終中心的元素，即使在瀏覽器窗口改變大小

Answer 1

經典問題。下面是一些示例CSS：

#your_element{ 
    position: fixed; 
    left: 50%; 
    top: 50%; 
    width: 600px; 
    height: 400px; 
    margin-left: -300px; 
    margin-top: -200px; 
} 

重要位：負邊距應該是相應尺寸的一半。

Answer 2

添加position: fixed;到它的樣式。如果你知道如何將其集中，那麼只需添加它就可以實現。

看看這裏的更多信息：http://www.w3.org/TR/CSS2/visuren.html#choose-position

Answer 3

我把這個模板HTML只是針對這種情況，當我需要一個容器，是垂直和水平居中：

CSS：

html, body { 
     height: 100%; 
    } 

    body { 
     background: #ffc; 
     margin: 0; 
     padding: 0; 
    } 

    #vertical-center { 
     float: left; 
     height: 50%; 
     width: 100%; 
     margin-top: -185px; 
    } 

    #content { 
     background: #ffffde; 
     border: 2px dashed red; 
     clear: both; 
     margin: 0 auto; 
     padding: 10px; 
     height: 350px; 
     width: 500px; 
    } 

HTML：

<div id="vertical-center"></div> 
<div id="content"> 
    <h1>Centered Content</h1> 
    <p>This content is centered on the page.</p> 
    <p>More importantly, it won't get cut off when the browser window becomes too small to display it.</p> 
</div> 

請注意，＃垂直中心的margin-top必須是#content div的一半高度，並且必須是負值。