div水平垂直居中

前言

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

1. text-align、height-line

  使用text-alignheight-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: tabledisplay: table-celldisplay: 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>



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

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


评论