如何让 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 class="parent-div"> <div class="child-div-1">子 div 1</div> <div class="child-div-2">子 div 2</div> </div>
这将创建一个具有两个重叠且水平居中的 div 的 div。
以上就是如何使用 CSS 使两个 div 在父 div 内居中并重叠？的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
673
收藏
