父盒子和子盒子都是绝对定位,怎么让子盒子在中间

img


div1是父盒子,采用相对定位。div3是div1的子盒子,采用绝对定位。div2是div3的子盒子,采用绝对定位。
这样的话,应该怎么让div2处于div3的中间呢?求解答。

可以把 HTML, css 放上来让其他分析吗?

用定位的方式 垂直居中? 还是使用什么方式都行 。flex也可以实现


.div3 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

父盒子和子盒子都是绝对定位,怎么让子盒子在中间?
1.建议学过弹性布局的 可以给父盒子添加弹性 display: flex; 然后子盒子margin: auto; 就可以完美实现真正的居中了,但是存在问题,因为你子盒子也有设置绝对定位的话 那么就不会生效了
2.给子盒子设置top:50% left:50%,但是如果这样设置的话只有盒子的左上角在中心,此时就需要设置transform: translate(-50%, -50%);,通过元素移动 来使元素在中间,但是此时要注意了,如果你在js里面有操作transform,比如控制旋转,这个时候你就要 综合写法了,在js控制内 transform :translate(-50%, -50%) rotate(30deg);
希望对你有所帮助,本人也是初学者,如有出入欢迎指正!