绝对定位position:absolute;实现居中对齐

时间:2024-03-15 15:47:06

绝对定位position:absolute;实现居中对齐

<!doctype html>
<html>
<head>
	<meta charset="utf-8">
	<title>练习的地方</title>
	<style>
	.main {
		position: absolute;
		width: 700px;
		height: 500px;
		background: pink;
		left: 50%;    //起始是在body中,横向距左50%的位置
		top:50%;      //起始是在body中,纵向距上50%的位置,这个点相当于body的中心点,div的左上角的定位
		transform:translate(-50%,-50%);//水平、垂直都居中,也可以写成下面的方式
        /*margin-left:-350px;
        margin-top:-250px;*/
	}
</style>
</head>
<body>
	<div class="main">第1个固定</div>
</body>
</html>