Javascript 如何将最内侧的矩形移动到最外侧的矩形内

我正致力于将X轴上最内部的形状（红色）居中于最外部形状（黑色）的中心，而红色的形状将其坐标/位置保持在其直接父形状（即蓝色）的内部

例如，将原始图像中的红色形状居中（尺寸如第二张图所示）：

应该是这样的：

此外，蓝色形状可以位于黑色形状内的任何位置，而红色形状可以位于蓝色形状内的任何位置

这是基本的数学：）我很难想出一个通用的数学公式，如何将红色形状居中于黑色形状中，同时保持其在蓝色形状中的位置。有人能告诉我怎么做吗

---

注意值（宽度）以像素为单位，不准确。

只需存储红色框与其父对象之间的距离，将红色框居中，然后使用存储的距离更改父对象：

let distance = red.x - redParent.x;                       // storing the distances between the red box and its parent

red.x = black.x + black.width / 2 - red.width / 2;        // centering the red box horizontally according to the black box

redParent.x = red.x - distance;                           // changing the red box parent position accordingly

---

一旦红色在黑色上居中，蓝色移动+10px，然后反向移动红色-10px，红色再次居中。然而，你的问题是，如何让红色在黑色中居中，而蓝色在第一位被任意定位。对吗？你好，M.@Micha，红色形状保持在蓝色形状内的位置，我的意思是蓝色形状也可以在黑色形状内向左或向右移动（也可以越界），红色形状在同一位置，但居中于黑色形状的正中心