div水平垂直居中

前端
CSS

前言

  作为后端的一员，虽然不用写一些复杂的css，但是一些简单的div布局还是有必要了解的。下面就总结一些div居中布局，参考资料(CSS布局之-水平垂直居中)：

1. text-align、height-line

  使用text-align，height-line实现div内部文字的水平垂直居中，局限就是div内部需是单行文字。

1
2
3
4
5
6
7
8
/*text-align、height-line*/
.wrap{
    text-align:center;
    line-height: 100px;
    height: 100px;
    background-color:#ccc;
}
<div class="wrap">水平居中的文字</div>
水平垂直居中的文字

2. fit-content(自动计算文字的宽度)

  使用css3的属性fit-content，div自动包裹并适配文字的宽度，缺陷就是低版本IE不能够很好兼容。

1
2
3
4
5
6
7
8
9
10
/*css3 fit-content*/
.fit-content-box{
    background-color: #ccc;
    width: fit-content;
    width: -webkit-fit-content;
    margin-left: auto;
    margin-right: auto;
    line-height: 25px;
}
<div class="fit-content-box">水平居中的文字水平居中的文字<br>水平居中的文字<br></div>
水平居中的文字水平居中的文字
水平居中的文字

3. padding填充

  通过padding填充实现div的居中，外部div固定长度和100%宽度：

  • padding填充(外部div 固定宽度)

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    /*padding填充(外部div 固定宽度)*/
    .box1{
        margin-left: auto;
        margin-right: auto;
        width: 200px;
        height: 200px;
        background-color: #ccc;
    }
    .padding-box{
        width: 200px;
        height: 200px;
        padding: 100px;
        background-color: #888;
        background-clip: content-box; /*背景颜色只裁剪到内容区*/
        text-align: center;
        line-height: 200px;
    }
       <div class="box1">
        <div class="padding-box">水平居中的文字</div>
    </div>

    水平居中的文字

  • padding填充(外部div 100%宽度)

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    /*padding填充(外部div 100%宽度)*/
    .max-width-box2{
        width: 100%;
        height: 400px;
        background-color: #ccc;
    }
    .auto-padding-box{
        width: 200px;
        height: 200px;
        padding-top: 100px;
        background-color: #888;
        background-clip: content-box;
        position: relative; /*相对标准流位置*/
        right: 100px;
        padding-left: 50%;
        text-align: center;
        line-height: 200px;
    }
    <div class="max-width-box2">
        <div class="auto-padding-box">水平居中的文字</div>
    </div>

    水平居中的文字

4. margin填充

  通过margin填充实现div的居中，外部div固定长度和100%宽度：

  • margin填充(外部div 固定宽度)

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    /*margin填充(外部div 固定宽度)*/
    .box3{
        margin-left: auto;
        margin-right: auto;
        width: 400px;
        height: 400px;
        background-color: #ccc;
        overflow: hidden; /*内部div内容溢出隐藏*/
    }
    .margin-box{
        width: 200px;
        height: 200px;
        background-color: #888;
        margin: 100px;
        text-align: center;
        line-height: 200px;
    }
    <div class="box3">
        <div class="margin-box">水平居中的文字</div>
    </div>

    水平居中的文字

  • margin填充(外部div 100%宽度)

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    /*margin填充(外部div 100%宽度)*/
    .max-width-box4{
        width: 100%;
        height: 400px;
        background-color: #ccc;
        overflow: hidden;
    }
    .auto-margin-box{
        width: 200px;
        height: 200px;
        margin-left: auto;
        margin-right: auto;
        margin-top: 100px;
        background-color: #888;
        text-align: center;
        line-height: 200px;
    }
    <div class="max-width-box4">
        <div class="auto-margin-box">水平居中的文字</div>
    </div>

    水平居中的文字

5. absolute定位

  通过内部元素的absolute定位，实现div元素的偏移，达到居中。

  • absolute布局(left、top偏移50% - 自身宽度50%)

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    /*absolute布局(left、top偏移50% - 自身宽度50%)*/
    .wrap-box1{
        width: 100%;
        height: 400px;
        background-color: #ccc;
        position: relative;
    }
    .absolute-box1{
        width: 200px;
        height: 200px;
        background-color: #888;
        position: absolute;
        left: 50%;
        top: 50%;
        margin-left: -100px;
        margin-top: -100px;
    }
    <div class="wrap-box1">
        <div class="absolute-box1">水平居中的文字水平居中的文字水平居中的文字</div>
    </div>

    水平居中的文字水平居中的文字水平居中的文字

  • absolute布局(transform)

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    /*absolute布局(transform)*/
    .wrap-box1{
        width: 100%;
        height: 400px;
        background-color: #ccc;
        position: relative;
    }
    .translate-box2{
        background-color: #888;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        -webkit-transform: translate(-50%, -50%);
    }
    <div class="wrap-box1">
        <div class="translate-box2">水平居中的文字水平居中的文字水平居中的文字</div>
    </div>

    水平居中的文字水平居中的文字水平居中的文字

  • absolute布局(三个div,通过top、left两次50%偏移)

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    /*absolute布局(三个div,通过top、left两次50%偏移)*/
    .wrap-box2{
        width: 200px;
        height: 200px;
        position: relative;
        top: 50%;
        left: 50%;
    }
    .wrap-box2>.inner{
        background-color: #888;
        position: relative;
        width: 100%;
        height: 100%;
        top: -50%;
        left: -50%;
    }
    <div class="wrap-box1">
        <div class="wrap-box2">
            <div class="inner">水平居中的文字水平居中的文字水平居中的文字</div>
        </div>
    </div>


    水平居中的文字水平居中的文字水平居中的文字


  • absolute布局(text-align:center)

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    /*text-align:center + absolute*/
    .text-align-box{
        background-color: #ccc;
        height: 400px;
        text-align: center;
    }
    .text-align-box>.inner{
        background-color: #888;
        height: 200px;
        width: 200px;
        position: absolute;
        display: inline-block;
        margin-top: 100px;
        margin-left: -100px;
    }
    <div class="text-align-box">
        <div class="inner">水平居中的文字水平居中的文字水平居中的文字</div>
    </div>

    水平居中的文字水平居中的文字水平居中的文字

  • absolute布局(margin:auto)

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    /*absolute布局(margin:auto)*/
    .wrap-box3{
        background-color: #ccc;
        width: 100%;
        height: 400px;
        position: relative;
    }
    .wrap-box3>.inner{
        background-color: #888;
        width: 200px;
        height: 200px;
        position: absolute;
        left: 0px;
        right: 0px;
        top: 0px;
        bottom: 0px;
        margin: auto;
    }
    <div class="wrap-box3">
        <div class="inner">水平居中的文字水平居中的文字水平居中的文字</div>
    </div>

    水平居中的文字水平居中的文字水平居中的文字

6. table布局

  通过table特有属性display: table，display: table-cell，display: inline-block，达到居中的效果。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
/*table布局*/
.table-box{
    width: 100%;
    height: 400px;
    background-color: #ccc;
    display: table;
}
.table-cell-box{
    text-align: center;
    vertical-align: middle;
    display: table-cell;
}
.table-cell-box>.innner{
    background-color: #888;
    display: inline-block;
}
<div class="table-box">
    <div class="table-cell-box">
        <div class="innner">
            水平居中的文字水平居中的文字水平居中的文字<br>
            水平居中的文字水平居中的文字水平居中的文字
        </div>
    </div>
</div>



水平居中的文字水平居中的文字水平居中的文字

水平居中的文字水平居中的文字水平居中的文字


评论