如何使用 CSS 使两个 div 在父 div 内居中并重叠？

golang学习网今天将给大家带来《如何使用 CSS 使两个 div 在父 div 内居中并重叠？ 》，感兴趣的朋友请继续看下去吧！以下内容将会涉及到等等知识点，如果你是正在学习文章或者已经是大佬级别了，都非常欢迎也希望大家都能给我建议评论哈~希望能帮助到大家！

如何让 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。

今天带大家了解了的相关知识，希望对你有所帮助；关于文章的技术知识我们会一点点深入介绍，欢迎大家关注golang学习网公众号，一起学习编程~