# 水平垂直居中方法
# 绝对定位(margin:auto实现居中)
div {
width:100px;
height: 100px;
position: absolute;
left:0;
top: 0;
bottom: 0;
right: 0;
/* margin设置为auto实现绝对定位元素的垂直居中 */
margin: auto;
}
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
# 绝对定位(margin 负值实现居中)
div {
width:100px;
height: 100px;
position: absolute;
left:50%;
top: 50%;
margin-left: -50px;
margin-top: -50px;
}
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
# 绝对定位(transform变换)
div {
width:100px;
height: 100px;
position: absolute;
left:50%;
top: 50%;
transform: translate(-50%, -50%);
}
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
# flex布局(不定宽高水平垂直居中)
body {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
div {
background-color: burlywood;
height: 100px;
width: 100px;
}
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
# Tabel布局
div {
width:100vw;
height: 100vh;
display: table-cell;
vertical-align: middle;
text-align: center;
}
1
2
3
4
5
6
7
2
3
4
5
6
7