文章介绍了三种方法来实现子盒子在大盒子内的水平垂直居中：1)使用margin配合子绝父相定位；2)使用transform的translate属性；3)特殊的子绝父相四方位设置。推荐使用transform方法，因为它适用于大小不固定的情况。
最初盒子样式
大小盒子嵌套关系
<body>
<div class="box1">
<div class="box2">子盒子</div>
</div>
</body>
大盒子样式块
.box1 {
position: relative;
width: 300px;
height: 300px;
background-color: pink;
}
原理图
当前效果图
之后还需要向左移动自身宽度的50%，再向上移动自身高度的50%
1.当子盒子的大小是固定时
可以使用子绝父相，子盒子使用绝对定位，父盒子使用相对定位，再使用margin来实现子盒子的水平垂直居中。
.box2 {
position: absolute;
left: 50%;
top: 50%;
margin-left: -50px;
margin-top: -50px;
width: 100px;
height: 100px;
background-color: yellowgreen;
}
2.当子盒子的大小非固定时
使用子绝父相加位移来完成
.box2 {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
width: 100px;
height: 100px;
background-color: yellowgreen;
}
还可以使用特殊方法 子绝父相 将四个方位设置0后，margin:auto auto来实现居中
.box2 {
position: absolute;
left: 0;
top: 0;
bottom: 0;
right: 0;
margin: auto auto;
width: 100px;
height: 100px;
background-color: yellowgreen;
}
最终三种方法实现的效果图（即完成大盒子中的小盒子水平垂直居中）
三种方式推荐第二种方式，使用子绝父相加位移来完成大盒子中的小盒子水平垂直居中。
本文若有不当之处，请指正。
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
