定位的居中

position定位的上下左右居中

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div class="yi">
			<div class="er"></div>
		</div>
	</body>
</html>
<style>
	.yi{
		height:500px;
		width:500px;
		background:pink;
		margin:30px auto;
		position: relative;
	}
	.er{
		height:200px;
		width:200px;
		background: #008000;
		position: absolute;
		top:50%;
		left:50%;
		transform: translate(-50%, -50%);
	}
</style>

　　

posted @ 2020-07-09 17:41  野鹤亦闲云  阅读(198)  评论(0)  编辑  收藏  举报