当缩放元素大于缩放前的容器时，CSS 变换缩放（向下）不使用边距 0 自动居中元素答案

【问题标题】：CSS transform scale (down) doesn't center element using margin 0 auto when scaled element was bigger than container before scaling当缩放元素大于缩放前的容器时，CSS 变换缩放（向下）不使用边距 0 自动居中元素
【发布时间】：2019-02-02 06:06:41
【问题描述】：

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

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

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

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

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

.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%; */
  
}

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

注意：

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

我想知道：

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

【问题讨论】：

我对你的要求有点迷茫。只是一些笔记。缩放不应成为您定位的一部分（如果您愿意，可以缩放一个孩子） Margin auto 仅适用于剩余空间，而不是负数。对于居中，您可以使用 calc 和 vw 或 flex（请参阅相关问题）

标签： html css

【解决方案1】：

你需要使用

transform-origin: center;

查看一些关于此的文档 https://developer.mozilla.org/en-US/docs/Web/CSS/transform-origin

【讨论】：

【解决方案2】：

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

除了绝对定位元素和使用left: 50% 之外，您还可以在缩放元素之前使用translateX(-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>

【讨论】：