缩放后如何滚动查看绝对定位div的全部边缘？

问题出在你用top:50%、left:50%结合transform: translate(-50%, -50%)的居中方式上。这种方式会让子元素的中心和父容器中心对齐，但父容器的滚动范围是基于子元素的定位坐标计算的——子元素的top:50%和left:50%会让它的左上部分超出父容器的初始滚动边界，导致无法通过滚动查看左上区域。

修改方案：移除top、left和transform属性，改用margin: auto结合top: 0; left: 0; right: 0; bottom: 0来实现居中，同时让父容器的滚动范围覆盖子元素的全部区域。

修改后的CSS代码：

.container {
  height: 300px;
  background: red;
  position: relative;
  overflow: scroll;
}

.child {
  font: 400 14px/17px 'Roboto';
  color: white;
  position: absolute;
  /* 替换原有的top/left/transform */
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  height: 200%;
  width: 200%;
  background: black;
  opacity: .5;
}

这样修改后，子元素会保持居中，同时父容器的滚动条可以滚动到子元素的四个边缘，包括左上区域。

内容的提问来源于stack exchange，提问作者Anas Latique