当缩放元素在缩放之前大于容器时，CSS 变换比例（向下）不会使用 margin 0 auto 将元素居中

Question

看起来，当缩小以前不适合其容器的元素时，margin: 0 auto将不再将元素置于其父级中（请注意，使用transform-origin: center center并不能解决此问题）。这是因为自动边距似乎在缩放之前而不是之后应用（我期望后者）。

在玩这个时，我最终设法将元素在其容器内居中，但仅使用绝对定位：

position: absolute;
transform: translateX(-50%) scale(0.5, 0.5);
left: 50%;

这是一种非常流行的技术，但在这种特殊情况下，将 translateX 函数放在缩放函数之前非常重要，因为它们是按定义的顺序执行的。

以下是说明该问题的代码片段（也在 CodePen 上： https: //codepen.io/liranh85/pen/qVewQp）

position: absolute;
transform: translateX(-50%) scale(0.5, 0.5);
left: 50%;

.container {
  border: 3px solid black;
  width: 500px;
  height: 200px;
  margin: 0 auto;
  position: relative;
}

.scaled {
  background-color: blue;
  width: 600px;
/*   width: 400px; */
  height: 100%;
  transform: scale(0.5, 0.5);
/*   transform: translateX(-50%) scale(0.5, 0.5); */
  margin: 0 auto;
/*   position: absolute;
  left: 50%; */
  
}

请注意：

• 当元素的宽度大于其容器的宽度时，该元素不会使用自动边距居中。
• 当缩放元素的宽度小于其容器时，缩放后它将保持居中（例如尝试使用width: 400px）。
• 当使用绝对定位时，如上所述，可以将元素居中。

我在想：

• 还有其他人遇到过这个问题吗？
• 这是将此类元素居中的最佳方式吗？
• 我说自动边距不能用于居中这样的元素是否正确？

Answer 1

你需要使用

transform-origin: center;

看看这个 https://developer.mozilla.org/en-US/docs/Web/CSS/transform-origin上的一些文档

Answer 2

您的怀疑是正确的：当元素太宽而无法容纳其父元素时，margin: 0 auto不会使元素水平居中。相反，它会导致元素在其父元素的最右边缘溢出。

您可以通过在缩放元素之前使用translateX(-50%)、绝对定位元素并使用 来正确居中元素left: 50%。这样做的原因是因为通过绝对定位子元素，您可以将其从父元素的布局流中取出，因此可以将其放置在父元素的水平中心。

注意：此解决方案假设您正在使用height: 100%. 如果需要非全高元素的垂直居中，请更新样式以便使用translate(-50%, -50%和top: 50%; left: 50%。

以下是基于您提供的代码的概念验证示例：

.container {
  border: 3px solid black;
  width: 500px;
  height: 200px;
  margin: 0 auto;
  position: relative;
}

.scaled {
  background-color: blue;
  width: 600px;
  height: 100%;
  transform: translateX(-50%) scale(0.5, 0.5);
  position: absolute;
  left: 50%;
}

<div class="container">
  <div class="scaled"></div>
</div>