盒子水平居中（详解）

女爷i 2022-10-16 13:19 136阅读 0赞

# 掌握盒子水平垂直居中的五点方案 #

*  定位（有三种方式）
 *  display：flex
 *  JavaScript
 *  display：table-cell

## 定位 ##

### 第一种 ###

注意：这种方式要设置了`html,body{ height: 100%; overflow: hidden; }`才会生效

### 第二种 ###

**第二种的方法考虑到box没有宽高或者是在页面中自适应的情况**  
此时又该怎么办呢？

.box{
         position: absolute;
         top:0;
         left:0;
         right: 0;
         bottom: 0;
         margin: auto;
         }

### 第三种 ###

还可以使用下面这一种，但是兼容性不是很好

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

## 使用display：flex ##

该方法兼容性也不是很好

使用JavaScript方法

html,body{ 
                height: 100%;
                overflow: hidden;
                position: relative;
            }
            .box{ 
                width: 100px;
                height: 50px;
                box-sizing: border-box;
                line-height: 50px;
                text-align: center;
                font-size: 16px;
                border: 1px solid lightblue;
                background: lightblue;
            }    
    <div class="box" id="box">
            哒哒哒哒
        </div>    
    <script>
            let HTML = document.documentElement,
                box = document.getElementById('box'), 
                winH = HTML.clientHeight,
                winW = HTML.clientWidth,
                boxW = box.offsetWidth,
                boxH = box.offsetHeight;
                box.style.position = 'absolute';
                box.style.top = (winH-boxH)/2+'px';
                box.style.left = (winW-boxW)/2+'px';
        </script>

## 使用display：table-cell ##

但是使用这个是需要在父级上加上该属性，并且父级要有固定的宽高

.wrapper{ 
                display: table-cell;
                vertical-align: middle;
                text-align: center;
                /* 固定宽高 */
                width:500px;
                height: 500px;
                background: chartreuse;
            }
            .box{ 
                display: inline-block;
            }
    <div class="wrapper">
         <div class="box" id="box">
              哒哒哒哒
          </div>
    </div>