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

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

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

怎么做?尽可能用css实现

阅读 3k
6 个回答

不理解啥叫重叠?小的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;
}

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

新手上路,请多包涵

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

<!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

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

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