Почему left:50% + transform:translateX(-50%) = середина?

Question

[godsplane]

Я реально не могу понять, может я уже запарился. Но если мы сначала двигаем контент на 50% вправо а потом на 50% влево, то почему он встает по середине?

Comments

[Михаил]

left 50% — 50% от родителя
transform 50% — 50% самого элемента

[Шохрух Шаймардонов]

Михаил, оформили бы в блок ответов
Это же решение)

Answer 1

[Михаил]

left 50% — 50% от родителя
transform 50% — 50% самого элемента

Answer 2

[Ilya Muromtsev]

Скорее всего left двигает элемент начиная с верхнего правого угла, а функция translate с середины элемента, на то и выходит центр