<head>
<style>
.father {
position: relative;
width: 600px;
height: 600px;
background-color: pink;
}
/* 1.子绝父相，transform */
优点：稳定，脱标进行定位，不会影响其他内容（建议使用）
/* .son {
position: absolute;
top: 50%;
left: 50%;
width: 100px;
height: 100px;
background-color: orange;
transform: translate(-50%,-50%);
} */
/* 2.子绝父相，将四个方位选取为0后直接用，margin:aotu */
.son {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
width: 100px;
height: 100px;
background-color: orange;
}
3.直接给小盒子设置margin值，将小盒子挤到盒子最中间
优点简单快捷
缺点盒子内如果有其他内容会造成其他内容的位移
</style>
</head>
<body>
<div class="father">
<div class="son"></div>
</div>
</body>
7601
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
