(demo)实现盒子居中方式

方法一：知道盒子宽高情况下

.box { position: absolute; box-sizing: border-box; width: 200px; height: 200px; border: 5px solid bisque; top: 50%; left: 50%; margin-left: -100px; margin-top: -100px; } <div class="box"> 我是box </div>

方法二：不清楚盒子宽高情况下，使用transform

.box { position: absolute; box-sizing: border-box; width: 200px; height: 200px; border: 5px solid bisque; top: 50%; left: 50%; transform: translate(-50%,-50%); } <div class="box"> 我是box </div>

方法三：全0

.box { position: absolute; box-sizing: border-box; width: 200px; height: 200px; border: 5px solid bisque; top: 0; left: 0; bottom: 0; right: 0; margin: auto; } <div class="box"> 我是box </div>

方法四：使用flex，主轴、交叉轴都居中

html,body { height: 100%; } body { display: flex; justify-content: center; align-items: center; } .box { box-sizing: border-box; width: 200px; height: 200px; border: 5px solid bisque; } <div class="box"> 我是box </div>

方法五：使用js

.box { box-sizing: border-box; width: 200px; height: 200px; border: 5px solid bisque; } <div class="box"> 我是box </div> //js实现居中：(一屏幕的宽度-盒子的宽度) === left let W = document.documentElement.clientWidth; let H = document.documentElement.clientHeight; let box = document.getElementById('box'); box.style.position = 'absolute'; box.style.left = ( W - 200 ) / 2 + 'px'; box.style.top = ( H -200 ) / 2 + 'px';