盒子嵌套居中

发表于 | 更新于: | 分类于 | | 阅读次数:
字数统计: 1.8k | 阅读时长 ≈ 8

一、父盒子为绝对高度值时子盒子的居中问题

需求：在一个长宽为400px的大盒子里放入长宽为200px的小盒子，让小盒子相对大盒子水平居中和垂直居中 。

1. 父盒子和子盒子的高度都为绝对值时

（1）设置父盒子padding

在父盒子中设置上内边距和左内边距实现子盒子水平垂直居中。

父盒子增加内边距会导致父盒子宽高变大，要实现居中效果要还原父盒子的宽高，有以下两种方式解决：

方式一、使用padding和大盒子消去法。

（1）父盒子内容的宽高（即width/height）要减去增加的内边距。

（2）设置父盒子 padding-top和 padding-left。即padding-top: (父盒子高度-子盒子高度)/2;和padding-left: (父盒子宽度-子盒子宽度)/2。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		.div1{
			width: 400px;
			height:400px;
			background-color: pink;
		}
		.div2{
			width: 200px;
			height:200px;
			background-color: red;
		}

		/*解决方法：*/
		.div1{/*由于增加了内边距使得div1盒子的长宽也增加了。所以要在原来div1长宽要减去内边距的大小*/
			width: 300px;
			height:300px;
		}
		.div1{/*在父盒子中设置上内边距和左内边距实现子盒子水平垂直居中*/
			padding-top: 100px; /*(400px-200px)/2=100px*/
			padding-left: 100px;/*(400px-200px)/2=100px*/
		}
	</style>
</head>
<body>
	<div class="div1">
		<div class="div2"></div>
	</div>
	
</body>
</html>

方式二、父盒子使用padding和box-sizing: border-box;

①父盒子增加box-sizing: border-box; 样式自动完成内容宽高的消减，免去计算步骤，原理和“父盒子内容的宽高（即width/height）要减去增加的内边距”一样。

②设置父盒子 padding-top和 padding-left。即padding-top: (父盒子高度-子盒子高度)/2;和padding-left: (父盒子宽度-子盒子宽度)/2。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		.div1{
			width: 400px;
			height:400px;
			background-color: pink;
		}
		.div2{
			width: 200px;
			height:200px;
			background-color: red;
		}
		
		/*解决方法：*/
		.div1{/*为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制,防止父盒子添加内边距，导致父盒子宽高变大*/
			box-sizing: border-box; 
		}
		.div1{/*在父盒子中设置上内边距和左内边距实现子盒子水平垂直居中*/
			padding-top: 100px;  /*(400px-200px)/2=100px*/
			padding-left: 100px; /*(400px-200px)/2=100px*/
		}
	</style>
</head>
<body>
	<div class="div1">
		<div class="div2"></div>
	</div>
</body>
</html>

（2）设置子盒子margin

（1）方式一、使用margin并设置父盒子边框属性

①如果两个盒子存在嵌套关系，那么设置了里面一个盒子的顶部的外边距，外面一个盒子也会被顶下来。
如果不想被顶下来可以给外面的盒子添加一个边框属性。

②设置子盒子margin-left和margin-top。即margin-left: (父盒子宽度-子盒子宽度)/2。和margin-top: (父盒子高度-子盒子高度)/2

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		.div1{
			width: 400px;
			height:400px;
			background-color: pink;
			border: solid; /*添加一个边框属性。*/
		}
		.div2{
			width: 200px;
			height:200px;
			background-color: red;
			margin-left: 100px; 
			margin-top: 100px; 
		}
	</style>
</head>
<body>
	<div class="div1">
		<div class="div2"></div>
	</div>
	
</body>
</html>

（2）方式二、使用margin: (父盒子高度-子盒子高度)/2 auto;并设置父盒子边框属性

①如果两个盒子存在嵌套关系，在设置了里面一个盒子的顶部的外边距后，外面一个盒子也会被顶下来。这就是所谓的“塌陷”的现象。
如果不想被顶下来可以给外面的盒子添加一个边框属性。

②设置子盒子外边距宽度自适应，margin高度等于(父盒子高度-子盒子高度)/2。即margin: (父盒子高度-子盒子高度)/2 auto;。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		.div1{
			width: 400px;
			height:400px;
			background-color: pink;
			border:  solid; /*添加一个边框属性。*/
		}
		.div2{
			width: 200px;
			height:200px;
			background-color: red;
			margin: 100px auto;
	</style>
</head>
<body>
	<div class="div1">
		<div class="div2"></div>
	</div>
	
</body>
</html>

在嵌套关系的盒子中，我们可以用margin: 0 auto;的方式来让里面的盒子相对于外面的盒子水平居中。在本例中，我们可以使用margin: 100px auto;设置上下长度来控制垂直居中。
实际开发时，当存在盒子嵌套关系（父子关系）时，首先考虑使用padding，其次才考虑使用margin。margin主要用于控制兄弟之间的间隙。

2. 父盒子为绝对高度值，子盒子为百分比时的子盒子居中问题

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
/*	html,body{
		margin:0px;
		height:100%;	
	}*/
	.fbox{
		height: 500px;
		width: 500px;
		background-color: pink;
		border: solid;
		box-sizing: border-box;
	}
	.sbox{
		height: 50%;
		width: 50%;
		margin: 125px 125px;
		background-color: green;
	}
</style>
</head>
<body>
	<div class="fbox">
		<div class="sbox">I am div !</div>
	</div>
</body>
</html>

二、父盒子为百分比高度值时子盒子的居中问题

1. 父盒子和子盒子都是百分比设置高度时

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
	html,body{
		margin: 0px;
		padding: 0px;
		height: 100%;
	}
	body{
		background-color: pink;
		border: solid;
		box-sizing: border-box;

	}
	.div1{
			width: 50%;
			height:50%;
			position: absolute;
 			left: 25%;
 			top: 25%;
			background-color: green;
			box-sizing: border-box;
		}
		.div2{
			width: 50%;
			height:50%;
			position: absolute;
 			left: 25%;
 			top: 25%;
			background-color: red;
		}
	</style>
</head>
<body>
	<div class="div1">
		<div class="div2"></div>
	</div>
	
</body>
</html>

2. 父盒子高度为百分比，子盒子高度为具体绝对值时

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
	html,body{
		margin:0px;
		height:100%;	
	}
	.fbox{
		height: 100%;
		background-color: pink;
		display:flex;
		align-items:center;   /*垂直居中*/
		justify-content:center;   /*水平居中*/
	}
	.sbox{
		height: 100px;
		width: 100px;
		background-color: green;
	}
</style>
</head>
<body>
	<div class="fbox">
		<div class="sbox">I am div !</div>
	</div>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
	html,body{
		margin:0px;
		height:100%;	
		display:flex;
		align-items:center;   /*垂直居中*/
		justify-content:center;   /*水平居中*/
		background-color: gray;
	}
	.fbox{
		height: 100px;
		width: 100px;
		background-color: pink;
	}
</style>
</head>
<body>
	<div class="fbox">
	</div>
</body>
</html>


----------- 本文结束 -----------




如果你觉得我的文章对你有帮助，你可以打赏我哦~
0%