要素を中央に配置するための配置方法 (Web ページ レイアウトのヒント)

 position:fixed; /*中央に配置したい要素を設定します*/
 left:50%; /*または right:50%*/
 top:50%; /*または bottom:50%*/
 margin-left:-要素の幅の半分; /*または margin-right*/
 margin-top:要素の高さの半分; /*または margin-bottom*/

<ヘッド>
    <メタ文字セット="UTF-8">
    <スタイル>
    /*ボックスはページ全体ではなくブラウザウィンドウの中央に配置されているため、ページを上下にスライドすると、
    ボックス要素は移動できないため、ここで box_compare 要素が参照として設定され、その高さがウィンドウの高さを超え、ページにスクロールバーが表示されます*/
        .box_compare {
            幅: 100%;
            高さ: 1000ピクセル;
            背景: スカイブルー;
        }
        
        。箱 {
         /*要素の幅と高さを設定します*/
            幅: 500ピクセル; 
            高さ: 300px;
            背景: 青;
            位置: 固定;
            left: 50%; /*要素の左端はウィンドウの左側からの距離の 50% です*/
            top: 50%; /*要素の上端はウィンドウの上端からの距離の 50% です*/
            上マージン: -150px;
            左マージン: -250px;
        }
    </スタイル>
</head>

<本文>
    <div class="box_compare"></div>
    <div class="box"></div>
</本文>

position: fixed; /*中央に配置したい要素を設定します*/
左: 0;
右: 0;
上: 0;
下部: 0;
マージン: 自動;

<ヘッド>
<メタ文字セット="UTF-8">
 <スタイル>
  /*box_compare は上記と同じ比較機能を持ちます*/
     .box_compare {
        幅: 100%;
           高さ: 1000ピクセル;
           背景: スカイブルー;
     }
     。箱 {
           幅: 60%;
           高さ: 300px;
           背景: 青;
           位置: 固定;
           左: 0;右: 0;
           上: 0;下: 0;
           マージン: 自動;
      }
     </スタイル>
</head>
<本文>
     <div class="box_compare"></div>
     <div class="box"></div>
</本文>