子div在父div中水平垂直居中的问题

古城微笑少年丶 2022-05-09 11:46 264阅读 0赞

## **总结：** ##

### div如何在另一个div中水平垂直居中？             1）利用父绝子相对，子div   margin：auto； 上下左右都为0             2）利用父绝子相对，子div   margin：auto；  left:50%;top:50%;margin-top:-子元素高度的一半;margin-left:-子元素宽度的一半;            3）伸缩盒布局：父元素display:flex;justify-content:center; align-items:center;            4)利用表格布局：父元素 display:table-cell;  vertical-align:middle;   text-align: center;  子元素：display：inline-block;               ###

### 文字如何在div中水平垂直居中？ ###

###                  水平：text-align:center; ###

###                  垂直：line-height:父div高度; ###

# 方法一、 CSS3 transform和position(元素宽高未知的情况) #

<div class="box">
        <span>宽高未知</span>
    </div>
    
    .box {
        width: 400px;
        height: 400px;
        background: #ccc;
        position:relative;
    }
    .box span {
        background: red;
        position: absolute;
        left: 50%;
        top: 50%;
        color: #fff;
        transform: translate(-50%, -50%);
    }

![1661405cd15abcef_w_415_h_409_f_png_s_2851][]

# 方法二、 绝对定位和margin-left:-自身宽度一半，margin-top: -自身高度的一半 (已知宽高) #

<div class="box">
        <span>宽高已知</span>
    </div>
    
    .box {
        width: 400px;
        height: 400px;
        background: #ccc;
        position: relative;
    }
    .box span {
        display: inline-block;
        width: 100px;
        height: 100px;
        background: red;
        text-align: center;
        line-height: 100px;
        position: absolute;
        left: 50%;
        top: 50%;
        color: #fff;
        margin-left: -50px;
        margin-top: -50px;
    }

![1661403c784932ed_w_415_h_415_f_png_s_3684][]

# 方法三、 css3 flex布局 #

<div class="box">
        <div class="child"></div>
    </div>
    
    .box {
        width: 400px;
        height: 400px;
        background: #ccc;
        display:flex;
        justify-content:center;
        align-items: center;
    }
    .box .child {
        display: inline-block;
        width: 100px;
        height: 100px;
        background: red;
    }

![166141fbd0cdad49_w_414_h_413_f_png_s_3150][]

# 方法四、 被居中的元素是inline或者inline-block元素 #

<div class="box">
        <span class="child">inline和inline-block元素</span>
    </div>
    
    .box {
        width: 400px;
        height: 400px;
        background: #ccc;
        display: table-cell;
        text-align: center;
        vertical-align: middle;
    }
    .box .child {
        display: inline-block;
        width: 100px;
        height: 100px;
        background: red;
    }

![1661423fdd363962_w_415_h_412_f_png_s_4434][]

# 方法五、绝对定位和margin:auto #

<div class="box">
        <div class="child">定高</div>
    </div>
    
    .box {
        width: 400px;
        height: 400px;
        background: #ccc;
        position: relative;
    }
    .box .child {
        width: 100px;
        height: 100px;
        background: red;
        text-align: center;
        color: #fff;
        line-height: 100px;
        position: absolute;
        top:0;
        right:0;
        bottom:0;
        left:0;
        margin: auto;
    }

![166142eea8b20ce8_w_410_h_412_f_png_s_3447][]

# 方法六、line-height: 父级高度和text-align: center #

<div class="box">
        <span class="child">line-height</span>
    </div>
    
    .box {
        width: 400px;
        height: 400px;
        background: #ccc;
        line-height: 400px;
        text-align: center;
        font-size: 0;
    }
    .box .child {
        background: red;
        font-size: 14px;
        color: #fff;
    }

![166143b259858b8b_w_413_h_415_f_png_s_2775][]

[1661405cd15abcef_w_415_h_409_f_png_s_2851]: https://user-gold-cdn.xitu.io/2018/9/26/1661405cd15abcef?w=415&h=409&f=png&s=2851
[1661403c784932ed_w_415_h_415_f_png_s_3684]: https://user-gold-cdn.xitu.io/2018/9/26/1661403c784932ed?w=415&h=415&f=png&s=3684
[166141fbd0cdad49_w_414_h_413_f_png_s_3150]: https://user-gold-cdn.xitu.io/2018/9/26/166141fbd0cdad49?w=414&h=413&f=png&s=3150
[1661423fdd363962_w_415_h_412_f_png_s_4434]: https://user-gold-cdn.xitu.io/2018/9/26/1661423fdd363962?w=415&h=412&f=png&s=4434
[166142eea8b20ce8_w_410_h_412_f_png_s_3447]: https://user-gold-cdn.xitu.io/2018/9/26/166142eea8b20ce8?w=410&h=412&f=png&s=3447
[166143b259858b8b_w_413_h_415_f_png_s_2775]: https://user-gold-cdn.xitu.io/2018/9/26/166143b259858b8b?w=413&h=415&f=png&s=2775