行内元素的垂直和水平居中
如果想使文字、行内元素、行内块元素在块元素内水平和垂直居中，可以采用下列的方法：
- 水平居中：
text-align: center - 垂直居中：
line-height等于height
例如：让一段文字水平垂直居中：
1
2
3
<div class="father">
12345
</div>
1
2
3
4
5
6
.father {
width: 200px;
height: 200px;
text-align: center;
line-height: 200px;
}
效果如下图所示：
再例如：让一个行内元素垂直居中：
1
2
3
4
5
<div class="father">
<span class="son">
12345
</span>
</div>
1
2
3
4
5
6
7
8
9
10
.father {
width: 200px;
height: 200px;
text-align: center;
line-height: 200px;
}
.son {
background-color: skyblue;
}
效果如下图所示：
块级元素的垂直和水平居中
margin
使用margin: 0 auto可以实现块元素在块元素内的水平居中：
1
2
3
<div class="father">
<div class="son"></div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
.father {
width: 200px;
height: 200px;
background-color: pink;
}
.son {
width: 100px;
height: 100px;
margin: 0 auto;
background-color: deeppink;
}
效果如下图所示：
该方法只能实现水平方向的居中
table布局
将父元素设置为display: table，text-align: center，vertical-align: center，子元素设置为display: table-cell。可以让大小不固定的元素居中：
1
2
3
4
5
6
<div class="father">
<div class="son">
11111111
<br><br>
</div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
.father {
display: table;
width: 200px;
height: 200px;
background-color: pink;
}
.son {
display: table-cell;
width: 100px;
height: 100px;
text-align: center;
vertical-align: middle;
}
效果如下图所示：
flex布局
将父元素通过display: flex设置为弹性容器，并设置justify-content: center; align-items: center居中对齐：
1
2
3
<div class="father">
<div class="son"></div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
.father {
display: flex;
justify-content: center;
align-items: center;
width: 200px;
height: 200px;
background-color: pink;
}
.son {
width: 100px;
height: 100px;
background-color: deeppink;
}
效果如下图所示：
定位+translate
父元素设置position: relative, 子元素设置绝对定位，并使用transform偏移：
1
2
3
<div class="father">
<div class="son"></div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.father {
position: relative;
width: 200px;
height: 200px;
background-color: pink;
}
.son {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 100px;
height: 100px;
background-color: deeppink;
}
效果如下图所示：
定位+calc
父元素设置position: relative, 子元素设置绝对定位，并使用transform偏移：
1
2
3
<div class="father">
<div class="son"></div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.father {
position: relative;
width: 200px;
height: 200px;
background-color: pink;
}
.son {
position: absolute;
left: calc(50% - 50px);
top: calc(50% - 50px);
width: 100px;
height: 100px;
background-color: deeppink;
}
效果如下图所示：
