当缩放的元素比缩放之前的容器大时，CSS变换缩放(向下)不会使用margin 0自动使元素居中 [英] CSS transform scale (down) doesn't center element using margin 0 auto when scaled element was bigger than container before scaling

问题描述

看起来，当缩小以前不适合其容器的元素时， margin:0 auto 将不再将该元素置于其父元素的中心(请注意，使用 transform-origin:中心中心不能解决此问题).这是因为自动页边距似乎适用于缩放之前而不是之后(我希望后者).

It appears that when scaling down an element which previously did not fit in its container, margin: 0 auto will no longer center the element within its parent (note that using transform-origin: center center does not solve this). This is because the auto margins seem to apply before the scaling rather than after (I expected the latter).

与此同时，我最终设法使元素在容器中居中，但仅使用绝对定位:

While playing with this, I eventually managed to center the element within its container, but only using absolute positioning:

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

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

This is a very popular technique, but in this particular case, it is important to place the translateX function before the scale function, as these are executed in the defined order.

以下是用于说明问题的代码片段(也在CodePen上: https://codepen.io/liranh85/pen/qVewQp )

Following is a snippet of code to illustrate the issue (also on 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:0 auto 不会将元素水平居中元素.相反，它将导致元素在其父元素的最右边缘溢出.

Your suspicions are correct: when the element is too wide to fit within its parent, margin: 0 auto will not horizontally center the element. It will instead cause the element to overflow at the far right edge of its parent.

您可以在缩放元素之前使用 translateX(-50％)来正确居中元素，绝对定位元素并使用 left:50％.之所以可行，是因为通过绝对定位子元素，您将其从父元素的布局流程中移出，因此可以将其定位在父元素的水平中心.

You can center your element properly by using translateX(-50%) before you scale the element, on top of positioning the element absolutely and using left: 50%. The reason why this works is because by absolutely positioning your child element, you are taking it out of the layout flow of the parent and therefore can position it in the horizontal center of the parent.

注意:该解决方案假定您使用的是 height:100％.如果需要非全高元素的垂直居中，请更新样式，以便您使用 translate(-50％，-50％和 top:50％; left:50％.

Note: This solution assumes that you are using height: 100%. If vertical centering of a non-full-height element is required, update the styles so that you're using translate(-50%, -50% and top: 50%; left: 50%.

这是一个基于您提供的代码的概念验证示例:

Here is a proof-of-concept example based on your code you've provided:

.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>

这篇关于当缩放的元素比缩放之前的容器大时，CSS变换缩放(向下)不会使用margin 0自动使元素居中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！