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 旋转和移动这些项目，因此仅减去项目宽度/高度的一半不是一个选项，因为它需要我不知道的数学。