如何让 div 内的两个 div 居中且重叠
在一个 div 中包含两个子 div 时，我们可能希望这些子 div 既居中放置又重叠在一起。为了实现此目的，我们可以使用 CSS 的定位属性和绝对定位。
CSS 实现
以下 CSS 代码将创建两个重叠并在包含它们的 div 内居中的 div：
.parent-div { width: 500px; height: 500px; margin: 0 auto; position: relative;}.child-div-1,.child-div-2 { position: absolute; left: 0; top: 0; width: 200px; height: 200px;}.child-div-2 { left: 50%; transform: translate(-50%, 0);}
此代码设置一个包含 div（.parent-div），具有固定宽度和高度，并使用 margin: 0 auto 使其水平居中。它的两个子 div（.child-div-1 和 .child-div-2）使用绝对定位相对于其父级放置。
立即学习“前端免费学习笔记（深入）”；
为了居中 .child-div-2，我们在水平方向上将 left 设置为 50%，然后使用 transform 属性进行 translation，将 .child-div-2 向左偏移 50%，使其水平居中。
示例
以下 HTML 代码显示了如何使用这些 CSS 类：
子 div 1子 div 2
这将创建一个具有两个重叠且水平居中的 div 的 div。
以上就是如何使用 CSS 使两个 div 在父 div 内居中并重叠？的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1557491.html
微信扫一扫 
支付宝扫一扫 
