一个盒子在另一个盒子中垂直居中的七种实现方法

最新推荐文章于 2023-08-10 10:27:17 发布

雪…

最新推荐文章于 2023-08-10 10:27:17 发布

阅读量7.8k

点赞数 11

分类专栏：前端文章标签： html

本文链接：https://blog.csdn.net/weixin_43498333/article/details/108256153

版权

前端专栏收录该内容

10 篇文章 0 订阅

订阅专栏

一个盒子在另一个盒子中垂直居中的五种实现方法

注：方法五、六、七不需要知道大小盒子的宽高。

方法一：纯 margin 实现

思路：给小盒子加左外边距（margin-left）和上外边距（margin-top），前提是需要知道大盒子和小盒子的宽高。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>05盒子居中写法</title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}

			.box1 {
				width: 500px;
				height: 500px;
				background: skyblue;
				overflow: hidden;
			}

			.box1_1 {
				width: 200px;
				height: 200px;
				background: green;
				margin-top: 150px;
				margin-left: 150px;
			}
		</style>
	</head>
	<body>
		<!--
			实现一个宽高为200*200的小盒子在一个宽高为500*500的大盒子里面做水平垂直居中效果。
		-->
		<!-- 1.给小盒子加外边距实现 -->
		<div class="box1">
			<div class="box1_1"></div>
		</div>

	</body>
</html>

方法二：纯 padding 实现

思路：给大盒子加左内边距（padding-left）和上内边距（padding-top），前提是需要知道大盒子和小盒子的宽高。大盒子加了内边距后，整个大盒子原来宽高500px*500px就会发生改变，所以要在宽高上减去内边距撑开的像素。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>05盒子居中写法</title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}

			.box1 {
				width: 350px;
				height: 350px;
				background: skyblue;
				padding-left: 150px;
				padding-top: 150px;
			}

			.box1_1 {
				width: 200px;
				height: 200px;
				background: green;
			}
		</style>
	</head>
	<body>
		<!--
			实现一个宽高为200*200的小盒子在一个宽高为500*500的大盒子里面做水平垂直居中效果。
		-->
		<!-- 2.给大盒子加内边距实现 -->
		<div class="box1">
			<div class="box1_1"></div>
		</div>

	</body>
</html>

方法三：绝对定位实现

思路：给小盒子添加绝对定位，使得小盒子在大盒子中水平垂直方向居中，需要已知大小盒子的宽高。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>05盒子居中写法</title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}

			.box1 {
				width: 500px;
				height: 500px;
				background: skyblue;
				position: relative;
			}

			.box1_1 {
				width: 200px;
				height: 200px;
				background: green;
				position: absolute;
				left: 150px;
				top: 150px;
			}
		</style>
	</head>
	<body>
		<!--
			实现一个宽高为200*200的小盒子在一个宽高为500*500的大盒子里面做水平垂直居中效果。
		-->
		<!-- 3.绝对定位实现 -->
		<div class="box1">
			<div class="box1_1"></div>
		</div>

	</body>
</html>

方法四：绝对定位 + margin 实现

思路：让小盒子在大盒子中用 50% 的方式定位，然后使用外边距移动一半的宽高，实现居中，此方法只需要知道小盒子的宽高即可，无论大盒子宽高如何变化都可以实现小盒子位于大盒子中心。

<html>
	<head>
		<meta charset="utf-8">
		<title>05盒子居中写法</title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}

			.box1 {
				width: 500px;
				height: 500px;
				background: skyblue;
				position: relative;
			}

			.box1_1 {
				width: 200px;
				height: 200px;
				background: green;
				position: absolute;
				left: 50%;	/*移动父元素宽度的一半距离*/
				top: 50%;
				margin-left: -100px;
				margin-top: -100px;
			}
		</style>
	</head>
	<body>
		<!--
			实现一个宽高为200*200的小盒子在一个宽高为500*500的大盒子里面做水平垂直居中效果。
		-->
		<!-- 4.绝对定位实现 -->
		<div class="box1">
			<div class="box1_1"></div>
		</div>

	</body>
</html>

方法五：绝对定位 + margin:auto 实现

思路：绝对定位中，设置left right top bottom 均为0px ，然后让小盒子外边距自适应，此方法不需要知道大小盒子的宽高，无论大盒子小盒子宽高如何变化，都能实现小盒子居中。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>05盒子居中写法</title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}

			.box1 {
				width: 500px;
				height: 500px;
				background: skyblue;
				position: relative;
			}

			.box1_1 {
				width: 200px;
				height: 200px;
				background: green;
				position: absolute;
				left: 0;
				top: 0;
				right: 0;
				bottom: 0;
				margin: auto;
			}
		</style>
	</head>
	<body>
		<!--
			实现一个宽高为200*200的小盒子在一个宽高为500*500的大盒子里面做水平垂直居中效果。
		-->
		<!-- 5.绝对定位实现 -->
		<div class="box1">
			<div class="box1_1"></div>
		</div>

	</body>
</html>

方法六：绝对定位 + left：50%；+ top：50% + transform

思路：绝对定位，小盒子左上角定位在大盒子中心，然后利用 transform让小盒子分别向上、向左移动自身宽高的一半实现居中。此方法不需要知道大小盒子的宽高

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>05盒子居中写法</title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}

			.box1 {
				width: 500px;
				height: 500px;
				background: skyblue;
				position: relative;
			}

			.box1_1 {
				width: 200px;
				height: 200px;
				background: green;
				position: absolute;
				left: 50%;
				top: 50%;
				transform: translate(-50%,-50%);
			}
		</style>
	</head>
	<body>
		<!--
			实现一个宽高为200*200的小盒子在一个宽高为500*500的大盒子里面做水平垂直居中效果。
		-->
		<!-- 6.绝对定位 + transform -->
		<div class="box1">
			<div class="box1_1"></div>
		</div>
	</body>
</html>

方法七：大盒子变成弹性盒实现

思路：让大盒子变成弹性盒容器，并添加 align-items：center；justify-content：center；让弹性盒容器内的flex项目沿主轴居中，沿交叉轴居中。此方法不需要知道大小盒子的宽高

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>05盒子居中写法</title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}

			.box1 {
				width: 500px;
				height: 500px;
				background: skyblue;
				display: flex;
				align-items: center;
				justify-content: center;
			}

			.box1_1 {
				width: 200px;
				height: 200px;
				background: green;
			}
		</style>
	</head>
	<body>
		<!--
			实现一个宽高为200*200的小盒子在一个宽高为500*500的大盒子里面做水平垂直居中效果。
		-->
		<!-- 7.给大盒子添加弹性盒，让其中的flex项目水平垂直对齐 -->
		<div class="box1">
			<div class="box1_1"></div>
		</div>
	</body>
</html>

钦此！前端ing~

雪…

关注

11
点赞
踩
37

收藏

觉得还不错? 一键收藏
2
评论
一个盒子在另一个盒子中垂直居中的七种实现方法

一个盒子在另一个盒子中垂直居中的五种实现方法方法一：纯 margin 实现思路：给小盒子加左外边距（margin-left）和上外边距（margin-top），前提是需要知道大盒子和小盒子的宽高。<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>05盒子居中写法</title> <style type="text/css"> *
复制链接

扫一扫