如何垂直居中网页？

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; 
}