使用justify-content:center居中后，添加scale如何保持元素居中？

问题原因 #

你当前的代码存在两个核心问题：

1. 浏览器默认给body设置了边距，且未指定body的高度，导致body的高度仅由内部div的112px决定，此时align-items: center并未真正让元素在视口垂直方向居中；
2. 当给div添加transform: scale(3)后，元素的视觉尺寸变为336px，但布局占位仍为112px，在body高度不足的情况下，视觉上就会出现明显偏移。

解决方案（无需使用position属性） #

方案一：完善body的flex基础配置

通过给body设置满视口高度并清除默认边距，确保flex布局的居中基准是整个视口，此时元素缩放后中心仍与视口中心重合：

body {
  margin: 0; /* 清除浏览器默认边距 */
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh; /* 让body至少占满整个视口高度 */
}
div {
  width: 112px;
  height: 112px;
  background: #333;
}
.scale {
  transform: scale(3); /* 缩放基于元素中心，视觉中心保持与视口中心一致 */
}

<body>
  <div class="scale"></div>
</body>

方案二：嵌套元素分离布局与缩放逻辑

用外层元素保持原尺寸作为flex居中的占位容器，内层元素负责视觉缩放，确保布局基准不受缩放影响：

body {
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}
.wrapper {
  width: 112px;
  height: 112px; /* 保持原尺寸用于flex居中定位 */
}
.scale {
  width: 100%;
  height: 100%;
  background: #333;
  transform: scale(3);
}

<body>
  <div class="wrapper">
    <div class="scale"></div>
  </div>
</body>

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