margin:auto; + position: absolute; 上下左右:0
一看 demo 就懂的啦

<!DOCTYPE html>
<html>

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<meta charset="utf-8">
	<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
	<title>利用 position + margin 实现固定盒子横向纵向居中</title>
	<style>
		body * {
			outline: 1px #ff0000 solid;
		}

		.father {
			width: 500px;
			height: 300px;
			position: relative;
		}

		.father .son {
			width: 180px;
			height: 140px;
			/*  */
			position: absolute;
			right: 0;
			bottom: 0;
			top: 0;
			left: 0;
			margin: auto;
		}
	</style>
</head>

<body>
	<div class="father">
		<div class="son">margin:auto + 上下左右:0</div>
	</div>
</body>

</html>

//end

声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。