CSS转换起源不适用于translate（）

Question

我想从其中心点移动div，但似乎translate()不在乎转换原点是什么，而是使用元素的左上角点将其移动。

这是一项测试，以确认这一点：

<div class="items" style="">
  <div class="item-1" style="width: 100px; height: 100px; background: blue; position: absolute; opacity: 0.5; transform-origin: 0% 0%; transform: translate(100px, 100px)"></div>
  <div class="item-2" style="width: 100px; height: 100px; background: red;  position: absolute; opacity: 0.5; transform-origin: 100% 100%; transform: translate(100px, 100px)"></div>
</div>

如您所见，机器人项目应该重叠而不应该重叠。

问题：如何使用元素的中心点定位元素？

注意：当我使用JS旋转和移动这些项目时，仅减去项目的宽度/高度的一半是不可行的，因为它需要我不知道的数学。