这篇博客探讨了如何利用CSS的`position: absolute`结合`left: 50%`，`top: 50%`以及`transform: translate(-50%, -50%)`属性，实现子元素在父元素中的精确居中。通过示例代码，展示了这种方法在不同场景下的应用，适用于需要灵活布局的网页设计。
1、 left: 50%; top: 50%; transform: translate(-50%, -50%);（自己本身尺寸的百分比）
.father {
position: relative;
width: 500px;
height: 300px;
margin: 100px auto;
border: 1px solid #000;
}
.son {
position: absolute;
left: 50%;
top: 50%;
/* margin-left: -100px;
margin-top: -50px; */
transform: translate(-50%, -50%);
width: 203px;
height: 100px;
background-color: pink;
}
扫一扫
评论
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
查看更多评论
添加红包
