# 1. 绝对定位法
不确定当前div的宽度和高度，采用 transform: translate(-50%,-50%); 当前div的父级添加相对定位(position: relative;)
- 父div
{
width: 200px;
height: 200px;
background-color: #ddd;
position: relative;
}
1
2
3
4
5
6
2
3
4
5
6
- 子div
{
background-color: red;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
1
2
3
4
5
6
7
2
3
4
5
6
7
- 效果
子div内容
# 2. 绝对定位法
确定了当前div的宽度，margin值为当前div宽度一半的负值。
- 父div
{
width: 200px;
height: 200px;
background-color: #ddd;
position: relative;
}
1
2
3
4
5
6
2
3
4
5
6
- 子div
{
background-color: red;
position: absolute;
left: 50%;
top: 50%;
width: 100px;
height: 100px;
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
- 效果
# 3. 绝对定位法
绝对定位下top left right bottom 都设置0。
- 父div
{
width: 200px;
height: 200px;
background-color: #ddd;
position: relative;
}
1
2
3
4
5
6
2
3
4
5
6
- 子div
{
background-color: red;
position: absolute;
width: 150px;
height: 150px;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
}
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
- 效果
# 4. flex布局方法
当前div的父级添加flex css样式。
- 父div
{
width: 200px;
height: 200px;
background-color: #ddd;
-webkit-display: flex;
display: flex;
-webkit-align-items: center;
align-items: center;
-webkit-justify-content: center;
justify-content: center;
}
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
- 子div
{
background-color: red;
}
1
2
3
2
3
- 效果
子div内容
# 4. table-cell实现水平垂直居中
table-cell middle center组合使用。
- 父div
{
width: 200px;
height: 200px;
background-color: #ddd;
display: table-cell;
vertical-align: middle;
text-align: center;
}
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
- 子div
{
width: 100px;
margin: auto;
background-color: red;
}
1
2
3
4
5
2
3
4
5
- 效果
子div内容