子div相对父div按百分比定位：absolute元素居中失效如何解决

问题原因 #

你当前的写法仅将.fish元素的左上角对齐到了父元素.game的中心，因此元素整体会向右下偏移，没有实现真正的居中。

解决方案 #

在.fish的样式规则中新增transform: translate(-50%, -50%);属性即可。
该属性会基于元素自身的宽高做偏移：向左平移自身宽度的50%，向上平移自身高度的50%，刚好让元素中心与父元素中心完全重合。你之前设置的transform-origin: center是浏览器默认值，无需调整，保留或删除都不影响最终效果。

额外注意：如果父元素.game没有显式设置高度，你需要先给它指定明确的高度值，否则相对定位的居中逻辑也会失效。

修改后完整代码 #

.game {
  background-color: #5386e4;
  overflow: hidden;
  position: relative;
  /* 此处替换为你实际需要的父容器高度 */
  height: 600px;
}

.fish {
  height: 320px;
  width: 300px;
  position: absolute;
  top: 50%;
  left: 50%;
  /* 新增以下这行代码即可实现居中 */
  transform: translate(-50%, -50%);
  z-index: 10000;
  background-color: #10121b;
}

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