Xuanmo Blog

让一个盒子居中的几种方法，通过绝对定位实现，会跟着浏览器窗口的缩放不断调整位置，一直居中

1. 通过绝对定位，定位时上边距与左边距都给50%，在利用margin减去当前盒子的一半宽度与高度

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

2. 通过绝对定位给4个方向都为0；用margin自动，实现居中

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

3. 在不知道width、height的情况下，利用transform:translate(-50%, -50%)一样可以做到

   
   .box {
       position: absolute;
       top: 50%;
       left: 50%;
       width: 100px;
       height: 100px;
       transform: translate(-50%, -50%);
   }
   

4. 通过 display: flex 实现居中

.box {
    display: flex;
    justify-content: center;
    align-items: center;
}

DEMO展示