如何使用 CSS 实现 div 内子元素重叠并水平或垂直居中？

css巧妙居中文本重叠

在本篇文章中，我们将探讨如何在不影响父容器样式的前提下，让div中的两个子元素div重合并水平或垂直居中。

答案：

要想实现上述效果，我们需要使用CSS的相对定位（position: relative）以及绝对定位（position: absolute）。具体步骤如下：

1. 设定父容器的相对定位：

   立即学习“前端免费学习笔记（深入）”；

   .box {
     position: relative;
   }

   登录后复制

2. 设置子元素的绝对定位：

   .inner1,
   .inner2 {
     position: absolute;
   }

   登录后复制

3. 设置子元素的尺寸、背景色及自适应定位：

   

   来画数字人直播

   来画数字人自动化直播，无需请真人主播，即可实现24小时直播，无缝衔接各大直播平台。

   0

   查看详情

   .inner1,
   .inner2 {
     width: 200px;
     height: 200px;
     background: blue;
     margin: auto;
   }

   登录后复制

4. 设置重叠的子元素的尺寸和背景色：

   .inner1 {
     width: 400px;
     height: 400px;
     background: yellow;
   }

   登录后复制

5. 水平或垂直居中：

   • 水平居中：

     left: 0;
     right: 0;

     登录后复制

   • 垂直居中：

     top: 0;
     bottom: 0;

     登录后复制

综上所述，通过以上CSS属性的组合使用，可以实现div中两个子元素的重合并水平或垂直居中。这些属性不会影响父容器的外观，也保证子元素不会超出父容器的范围。

以上就是如何使用 CSS 实现 div 内子元素重叠并水平或垂直居中？的详细内容，更多请关注php中文网其它相关文章！