Как сдвинуть самый внутренний прямоугольник внутри самого внешнего прямоугольника

Question

Я работаю над центрированием самого внутреннего ( красный форма) по оси X по центру самой внешней формы ( черный )shape), в то время как форма red сохраняет свои координаты / позицию внутри своего прямого родителя, то есть форму blue .

Например, центрирование красной фигуры из этого исходного изображения (размеры показаны на втором рисунке):

должно выглядетьвот так:

Кроме того, форма blue может быть где угодно внутри black shape и red где-нибудь внутри синий .

Это базовая математика :), и у меня возникают проблемы с выработкой общей формулы математика о том, как центрировать красный фигура внутри темного , сохраняя свое положение внутри синего фигуры.Может кто-нибудь направить или объяснить мне, как это сделать?

ПРИМЕЧАНИЕ значения (ширины) указаны в пикселях и не точны.

Answer 1

Просто сохраните расстояние между красным прямоугольником и его родительским элементом, отцентрируйте красное поле и затем измените родительский элемент, используя сохраненное расстояние:

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