如何垂直居中網頁？

Question

我正在製作一個攝影網站，頁面大小約爲960x780，我希望頁面保持在窗口的中心（垂直和水平），我們可以放大或縮小頁面。

我試過了，但是我面臨着定位問題。

任何人都可以告訴我答案嗎？

Answer 1

您需要使用position: absolute;，使您的網頁，更好地將其描述爲在中心一個div /容器水平/垂直...

喜歡這個

.center { 
    width: 960px; 
    height: 780px; 
    position: absolute; 
    left: 50%; 
    top: 50%; 
    margin-left: -480px; /* Half of the total width */ 
    margin-top: -390px; /* Half of the total height */ 
} 

，如果你想中心它只是垂直你可以做這樣的：

HTML

<div class="mainwrapper"> 
    <div class="innerwrap"> 
     <div class="content"> 
     Your content 
     </div> 
    </div> 
</div> 

CSS

.mainwrapper { 
    display:table; 
} 

.innerwrap { 
    display:table-cell; 
    vertical-align:middle; 
}