元素居中的几种方式

最新推荐文章于 2022-12-12 18:13:57 发布

Stirve unremitting

最新推荐文章于 2022-12-12 18:13:57 发布

阅读量63

点赞数

分类专栏：笔记

本文链接：https://blog.csdn.net/weixin_46421045/article/details/104856940

版权

笔记专栏收录该内容

96 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{margin: 0;padding: 0;}
			/*方式一*/
			.box{
				width: 500px;
				height: 400px;
				background:red;
				margin: 200px;
				position: relative;/*作为参考物 给父级*/
			}
			.con{
				width: 100px;
				height: 100px;
				background: pink;
				position: absolute;/*子元素改变自己的位置*/
				top:0px;
				bottom:0px;
				left:0px;
				right:0px;
				margin:auto;/*自适应*/
			}
			
			/*方式二*/
			.box1{
				width: 500px;
				height: 400px;
				background:red;
				margin: 200px;
				position:relative;/*父级作为参考物*/
			}
			.con1{
				width: 100px;
				height: 100px;
				background:pink;
				position:absolute;/*子集作为被参考物*/
				top:50%;
				left:50%;
				margin-left:-50px;
				margin-top:-50px;
			}
		</style>
	</head>
	<body>
		
		<!--方式一-->
		<!--<div class="box">
			<div class="con"></div>
		</div>-->
		
		<!--方式二-->
		<!--<div class="box1">
			<div class="con1"></div>
		</div>-->
		
		
		<div class="con"></div>
	</body>
</html>