Question

此处的简单方案：http://jsfiddle.net/s4tjP/1/

<style>
   #outer  { width: 200px; height: 100px; outline: solid 1px Red; }
   #inner { width: 220px; height: 120px; oultine: solid 1px Green;
             -webkit-transform: scale(0.75);
             -webkit-transform-origin: 50% 0;
   }
</style>

<div id="outer">
    <div id="inner"></div>      
</div>

问题是如何计算缩放对象的x原点，以便将其水平居中于其父对象上。所有尺寸都是已知的。

小提示显示外框宽度为200px，内框宽度为220px，缩放0.75，结果为165px。

50％的x原点将原点设置在未缩放对象的中间位置。这显然太多了。因此，如果不是50％x比例比例（在这种情况下为37.5％） - 但这也不对。以像素为单位，尺寸之间的差异的一半似乎是估计它的好方法，但没有运气。

感谢。

Answer 1

嗯，这是一个数学问题，而不是编程问题，不是吗。

首先，你的内部宽度为220像素，内部为200像素，左对齐。你的偏移量是10px（差异的一半）。您需要将内部div 10px的中心向左移动以使其居中。

然后。您正在应用0.75的比例。这意味着delta（或变化）为0.25。要获得10px的增量（您需要的运动），您必须将其应用于初始长度的40px（10px除以0.25）。如果您的变换发生在内部div中心左侧40px处，它将使其居中。

现在，由于中心距离左边缘110px，因此距离中心左侧40px的点距左边缘右侧为70px。

最后，宽度为220px的70px为31.81％。

尝试一下，你会看到

Answer 2

太棒了，谢谢@vals。由于x原点可以用像素表示，因此我们可以简化：

x = outer width 
j = inner width 
s = scale 
k = js (scaled width)
d = 1-s (delta)

x-offset = (x-k) / 2d
x-offset = (outer width - (inner width * scale)) / 2 (1 - scale)

这非常有用（对不起@Paulie_D！）

CSS：计算x原点以使缩放对象水平居中

2 个答案: