html - 如何垂直居中网页？

Question

我正在制作一个摄影网站，页面大小约为 960x780，无论我们放大还是缩小页面，我都希望页面保持在窗口的中心（垂直和水平）。

我试过了，但我在定位方面遇到了问题。

谁能告诉我答案？

Answer 1

你需要用来position: absolute;带上你的页面，最好把它描述为水平/垂直居中的 div/container...

像这样

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