水平垂直居中的几种方式
# 水平居中
1. 行内元素
text-align:center;
2. 块元素
margin:0 auto;
3. 定位
position: absolute;
left: 50%;
transform: translateX(-50%);
4. flex
display:flex;
justify-content:center;
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
# 垂直居中
1. 行内元素
line-height:height
2. 父元素设置table-cell
display: table-cell;
vertical-align: middle;
3. 定位
position: absolute;
top: 50%;
transform: translateY(-50%);
4. flex
display:flex;
align-items:center;
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
# 水平垂直居中
1. 定位 + margin
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
2. 定位 + transform
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
3. flex
display:flex;
align-items:center;
justify-content: center;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
编辑 (opens new window)
上次更新: 2023/03/08, 02:53:55