定位的居中

Posted 2020-12-16 xiaoyaolang

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了定位的居中相关的知识，希望对你有一定的参考价值。

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>

以上是关于定位的居中的主要内容，如果未能解决你的问题，请参考以下文章