为何div无法居中？hover状态下的居中实现问题求助

你的代码存在两个核心问题导致元素无法正确居中，hover时也会偏离：

1. transform属性顺序错误：你先写了scale(.2)再写translate(-50%, -50%)，transform的计算顺序是从右到左，这会让translate的百分比基于缩放后的元素尺寸，导致居中偏移。正确顺序应该是先translate再scale，让居中计算基于元素原始尺寸。
2. hover状态丢失translate属性：hover时你只设置了scale(1.5)，覆盖了初始的transform属性，导致元素失去居中定位。

修改后的代码 #

CSS部分

* {
  box-sizing: border-box;
}
body {
  position: relative;
  margin: 0; /* 清除body默认边距，避免影响全屏居中 */
  min-height: 100vh; /* 让body占满视口高度，确保垂直居中生效 */
}

.zoom {
  padding: 50px;
  background-color: green;
  transition: transform .2s;
  width: 200px;
  height: 200px;
  position: absolute;
  top: 50%;
  left: 50%;
  /* 先translate再scale，确保居中基于原始尺寸 */
  transform: translate(-50%, -50%) scale(.2);
}

.zoom:hover {
  -ms-transform: translate(-50%, -50%) scale(1.5); /* IE 9 */
  -webkit-transform: translate(-50%, -50%) scale(1.5); /* Safari 3-8 */
  transform: translate(-50%, -50%) scale(1.5); 
  /* 保留translate属性，hover时仍保持居中 */
}

HTML部分

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="zoom"></div>
</body>
</html>

额外优化点 #

• 给body添加margin: 0清除默认边距，min-height: 100vh确保body占满整个视口高度，避免元素居中受body高度影响。
• 移除了无用的margin: 0 auto，因为绝对定位+transform的居中方式已经生效，这个属性不会起作用。

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