问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

怎么设置一个div内的两个div居中，并且重叠？

头像
列车
    15035591

    一个div，内部有两个子元素，也是div，其中一个比另一个大，要求内部的两个div重合，并且相对包含它的div进行水平居中或垂直居中。

    对内部的两个div设置，不能影响父div的外观，也不能跑到父div外面去了。

    怎么做？尽可能用css实现

    htmlcsscss3html5前端
    阅读 4.7k
    6 个回答
    得票最新
    头像
    陟上晴明
      21.4k144991
      ✓ 已被采纳

      不理解啥叫重叠？小的div叠在大的div上面？

      image.png

      <div class="box">
  <div class="inner1"></div>
  <div class="inner2"></div>
</div>
      .box {
  width: 500px;
  height: 500px;
  border: 5px solid red;
  margin: 100px auto;
  position: relative;
}
.inner1,
.inner2 {
  width: 200px;
  height: 200px;
  background: blue;
  margin: auto;
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
}
.inner1 {
  width: 400px;
  height: 400px;
  background: yellow;
}
      头像
      Riissesse
        145

        画个草图看看想要的效果？

        头像
        zangeci
          14.8k71731
          头像
          凵
            53
            新手上路，请多包涵

            用定位将两个子元素居中,在控制子元素的层级,z-index

            头像
            (ಡωಡ)hiahiahia
              8331313
              <!DOCTYPE html>
<html lang="en">
<head>
<style>
.parent {
    position: relative;
    width: 300px;
    height: 300px;
    border: 1px solid;
}
.childrenOne {
    width: 200px;
    height: 200px;
    border: 1px solid red;
}
.childrenTwo {
    position: absolute;
    left: 50px;
    top: 50px;width: 100px;
    height: 100px;
    border: 1px solid #048cf8;
}
</style>
</head>
<body>
    <div class="parent">
        <div class="childrenOne"></div>
        <div class="childrenTwo"></div>
    </div>
</body>
</html>

              image.png

              头像
              XboxYan
                18.2k93790

                可能是最简单的方式，实现重点

                1. 父级设置flex居中
                2. 子级设置绝对定位，注意，不要设置left/top
                .parent{
    display: flex;
    justify-content: center;
    align-items: center
}
.parent>div{
    position: absolute;
}
                撰写回答
                你尚未登录，登录后可以
                • 和开发者交流问题的细节
                • 关注并接收问题和回答的更新提醒
                • 参与内容的编辑和改进，让解决方法与时俱进
                推荐问题