小编今天总结了:九种关于盒子居中的方法,并且兼容性非常好,代码如下:

页面骨架如下:

1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div class="parent">
<div class="child"></div>
</div>
</body>
</html>

第一种居中方法如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
.parent{
width: 400px;
height: 200px;
background: red;
padding:50px 100px;
box-sizing: border-box; //这句话是关键,加上它,可以保证盒子的宽,高,不增加
}
.child{
width: 200px;
height: 100px;
background: #2433ff;
}

第二种居中方法如下:

1
2
3
4
5
6
7
8
9
//该方法只在子元素宽高已知的情况下用
.child{
width: 200px;
height: 100px;
background: #2433ff;
position: relative;
left:100px;
top:50px;
}

第三种居中方法如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
//这个方法常用
.parent{
width: 400px;
height: 200px;
background: red;
position: relative;
}
.child{
width: 200px;
height: 100px;
background: #2433ff;
position: absolute;
left:50%;
top:50%;
margin-top:-50px;
margin-left:-100px;
}

第四种居中方法如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
.parent{
overflow: hidden; //加border:1px solid transparent也是可以的,决绝外边距合并问题,就是防止大盒子也会谁着小盒子往下移动
width: 400px;
height: 200px;
background: red;
}
.child{
width: 200px;
height: 100px;
background: #2433ff;
margin-top: 50px;
margin-left: 100px;
}

第五种居中方法如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
//注意:这个方法,对底版的IE不兼容
.parent{
width: 400px;
height: 200px;
background: red;
display: table-cell;
vertical-align:middle;
}
.child{
width: 200px;
height: 100px;
background: #2433ff;
margin: 0px auto;
}

第六种居中方法如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
//注意:这个方法,对底版的IE兼容
.parent{
width: 400px;
height: 200px;
background: red;
display: table-cell;
vertical-align:middle;
text-align: center;
}
.child{
width: 200px;
height: 100px;
background: #2433ff;
display: inline-block;
}

第七种居中方法如下:

1
2
3
4
5
6
7
8
9
10
11
12
.parent{
width: 400px;
height: 200px;
background: red;
display:flex;
}
.child{
width: 200px;
height: 100px;
background: #2433ff;
margin: auto;
}

第八种居中方法如下:

1
2
3
4
5
6
7
8
9
//注意:这个方法,有兼容问题
.parent{
width: 400px;
height: 200px;
background: red;
display:flex;
justify-content: center;
align-items: center;
}

第九种居中方法如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.parent{
width: 400px;
height: 200px;
background: red;
position: relative;
}
.child{
width: 200px;
height: 100px;
background: #2433ff;
position: absolute;
top:50%;
left:50%;
transform: translate(-50%,-50%);
}