面试题：CSS盒子水平居中、垂直居中、水平垂直居中

比眉伴天荒 2023-02-26 11:28 73阅读 0赞

### 目录 ###

*   *   *  1. 实现盒子水平垂直居中
         *   *  方法一：定位（1）
             *  方法二：定位（2）
             *  方法三：定位（3）
             *  方法四：display:flex
             *  方法五：使用JavaScript
         *  2. 实现盒子水平居中
         *   *  方法一：margin
             *  方法二：text-align+inline-block
             *  方法三：position定位（1）
             *  方法四：position定位（2）
             *  方法五：display:flex
         *  3. 实现盒子垂直居中
         *   *  方法一：position定位（1）
             *  方法二：position定位（2）
             *  方法三：display:flex

### 1. 实现盒子水平垂直居中 ###

![在这里插入图片描述][20200715163030756.png]

#### 方法一：定位（1） ####

注意：该方法需要考虑浏览器兼容问题

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

#### 方法二：定位（2） ####

注意：该方法适用于盒子有宽高的情况

.parent { 
        position: relative;
    }
     
    .child { 
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        margin: auto;
    }

#### 方法三：定位（3） ####

注意：该方法适用于盒子宽高已知的情况

.parent { 
        position: relative;
    }
     
    .child { 
        position: absolute;
        top: 50%;
        left: 50%;
        margin-top: -50px;     /* 自身 height 的一半 */
        margin-left: -50px;    /* 自身 width 的一半 */
    }

#### 方法四：display:flex ####

注意：该方法要考虑兼容的问题，该方法在移动端用的较多

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

#### 方法五：使用JavaScript ####

### 2. 实现盒子水平居中 ###

#### 方法一：margin ####

注意：该方法需要已定义盒子的宽度

.child { 
        margin: 0 auto;
    }

#### 方法二：text-align+inline-block ####

注意：该方法适用于多种场景，盒子宽度可以不固定

.parent { 
        text-align: center;
    }
    .child { 
        display: inline-block;
    }

#### 方法三：position定位（1） ####