JSは箱の幅が分からない場合、デフォルトで箱をページの中で水平に垂直に中央に位置させる

もちろん私達が幅の高さを知っている情況の下で、1、私達はCSSの中の絶対的な位置付けを通じて実現します

#box{
    width:100px;
    height:100px;
    position:absolute;
    top:50%;
    left:50%;
    margin-top:-50px;
    margin-left:-50px;
}

2、CSSにおけるmargin=autoにより、4方向ともに0とする方法も実現可能

#box{
    width:200px;
    height:200px;
    margin:auto;
    position:absolute;
    top:0;
    right:0;
    bottom:0;
    left:0;
}

3、CSS 3のフレックスレイアウト(flex)を通じて、箱の中央のくだらない話を多く言わないで、直接コードをつけることができます.

body {
       display: flex;
       align-items: center; /*  body       */
       justify-content: center; /*  body         */
     }
#box{
    height:200px;
    width:200px;
    background-color:red;
}

アスペクトがわからない場合
JSではまず1画面の幅を取得し、箱の幅を取得することができます.

var  windH = document.documentElement.clientHeight||document.body.clientHeight;     //       。(             )

var  windW = document.documentElement.clientWidth||document.body.clientWidth;     //       。

var boxH = document.getElementById('box').offsetHeight;  //       （border(top\bottom)+padding(top\bottom)+height）

var boxW = document.getElementById('box').offsetWidth;  //       （border(left\right)+padding(left\right)+width）

#box.style.top=(winH-boxH)/2+'px';
#box.style.left=(winW-boxW)/2+'px';

以上の方法で、箱を水平垂直に中央に置くことができます.の