#今日说码栏目#第十八集盒子(容器)垂直+水平居中的三种方式

最新推荐文章于 2024-10-15 14:59:12 发布

房东的_猪

最新推荐文章于 2024-10-15 14:59:12 发布

阅读量103

点赞数 2

文章标签： CSS布局居中对齐 position定位 transform 弹性盒子

本文链接：https://blog.csdn.net/Abner_/article/details/126043827

版权

1、第一种使用position定位+margin居中，子元素上下左右全为0，

①给外面的父元素(可以是html，也可以是div盒子)设置为相对定位；

②给子元素设置绝对定位；

③设置子元素的left、top、right、bottom选值全部为0；

④设置子元素的外边距为auto margin: auto;

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>实现水平垂直居中方法1</title>
		<style>
			/* 第一种使用position定位 */
			.box01 {
				width: 300px;
				height: 300px;
				position: relative;
				background-color: chocolate;
			}
			.box02 {
				width: 100px;
				height: 100px;
				background-color: crimson;
				position: absolute;
				top: 0;
				right: 0;
				bottom: 0;
				left: 0;
				margin: auto;
			}
		</style>
	</head>
	<body>
		<div class="box01">
			<div class="box02"></div>
		</div>
	</body>
</html>

2、使用position和transform实现

先用个margin设置水平居中，再设置定位，偏移量，

让元素实现上下居中，最后使用平移使元素居中

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>实现水平垂直居中方法2</title>
		<style>
			/* 使用position和transform */
			html,
			body {
				margin: 0;
				padding: 0;
                width: 100%;
				height: 100%;
			}
			.son {
				height: 200px;
				width: 200px;
				background: green;
				margin: 0 auto; /*实现水平居中*/
				position: relative; /*设置定位，偏移量，让元素实现上下居中*/
				top: 50%;
				transform: translateY(-50%); /*使用平移使图片居中，思想与方法一致*/
			}
		</style>
	</head>
	<body>
		<div class="son">垂直水平居中</div>
	</body>
</html>

3、利用弹性盒子

在父元素中使用弹性盒子，

justify-content:center;控制水平居中；

align-items:center;控制垂直居中。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>实现水平垂直居中方法3</title>
		<style>
			/* 弹性盒子 */
			html,
			body {
				margin: 0;
				padding: 0;
				height: 100%;
				width: 100%;
			}
			body {
				display: flex; /*打开弹性盒子（在父元素中使用）*/
				justify-content: center; /*控制水平居中*/
				align-items: center; /*控制垂直居中*/
			}
			.son {
				height: 200px;
				width: 200px;
				background: orange;
			}
		</style>
	</head>
	<body>
		<div class="son">垂直水平居中</div>
	</body>
</html>

4、利用定位position

①设置父元素为相对定位， position: relative;
②设置子元素为绝对定位，position: absolute; top：50%； left：50%；
③利用外边距将子元素向上并且向左分别移动其自身宽度和高度的一半

margin-left: -100px;

margin-top: -100px;

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Document</title>
		<style>
			* {
				padding: 0;
				margin: 0;
				box-sizing: border-box;
			}
			.father {
				position: relative;
				width: 400px;
				height: 400px;
				background-color: rgb(24, 168, 225);
				margin: 100px auto;
			}
			.son {
				position: absolute;
				top: 50%;
				left: 50%;
				width: 200px;
				height: 200px;
				margin-left: -100px;
				margin-top: -100px;
				background-color: rgb(209, 151, 43);
			}
		</style>
	</head>
	<body>
		<div class="father">
			<div class="son"></div>
		</div>
	</body>
</html>