前言
作为后端的一员,虽然不用写一些复杂的css,但是一些简单的div布局还是有必要了解的。下面就总结一些div居中布局,参考资料(CSS布局之-水平垂直居中):
1. text-align、height-line
使用text-align
,height-line
实现div内部文字的水平垂直居中,局限就是div内部需是单行文字。
1 | /*text-align、height-line*/ |
水平垂直居中的文字
2. fit-content(自动计算文字的宽度)
使用css3的属性fit-content
,div自动包裹并适配文字的宽度,缺陷就是低版本IE不能够很好兼容。
1 | /*css3 fit-content*/ |
水平居中的文字水平居中的文字
水平居中的文字
水平居中的文字
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 | /*table布局*/ |
水平居中的文字水平居中的文字水平居中的文字
水平居中的文字水平居中的文字水平居中的文字