如何垂直居中网页？

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