四种方法让子元素在父元素中水平垂直居中

开心很重要

已于 2022-06-03 10:10:13 修改

阅读量294

点赞数

文章标签： css css3 html

于 2022-06-03 10:08:09 首次发布

本文链接：https://blog.csdn.net/Black_Straight/article/details/125110400

版权

文章目录

一、四种方法让子元素在父元素中水平垂直居中

一、四种方法让子元素在父元素中水平垂直居中

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{margin: 0;padding: 0;}

			/*绝对定位+margin：必须知道子元素的宽高才可以实现*/
			#box1{
				width: 500px;height: 400px;background: red;margin: 50px auto;
				position: relative;
			}
			#box1 .divbox1{
				width: 300px;height: 200px;background: green;
				position: absolute;left: 50%;top: 50%;margin-left: -150px;margin-top: -100px;
			}
			
			/*绝对定位+margin：无需知道任何元素的宽高都可以实现*/
			#box2{
				width: 500px;height: 400px;background: red;margin: 50px auto;
				position: relative;
			}
			#box2 .divbox2{
				width: 300px;height: 200px;background: green;
				position: absolute;left: 0;top: 0;right: 0;bottom: 0;margin: auto;
			}
			
			/*弹性盒实现：无需知道任何元素的宽高都可以实现*/
			#box3{
				width: 500px;height: 400px;background: red;
margin: 50px auto;
				display: flex;
justify-content: center;
align-items: center;
			}
			#box3 .divbox3{
				width: 300px;height: 200px;background: green;
			}
			
			/*决定定位+位移：无需知道任何元素的宽高都可以实现*/
			#box4{
				width: 500px;height: 400px;background: red;margin: 50px auto;
				position: relative;
			}
			#box4 .divbox4{
				width: 300px;height: 200px;background: green;
				position: absolute;left: 50%;top: 50%;
				transform: translate(-50%,-50%);
			}
		</style>
	</head>
	<body>
		<div id="box1">
			<div class="divbox1"></div>
		</div>
		<div id="box2">
			<div class="divbox2"></div>
		</div>
		<div id="box3">
			<div class="divbox3"></div>
		</div>
		<div id="box4">
			<div class="divbox4"></div>
		</div>
	</body>
</html>