html - Web ページを垂直方向に中央揃えにする方法は?

Question

写真の Web サイトを作成しています。ページのサイズは約 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;
}