CSS transform-origin not working with translate()

I want to move a div from its center point, but it seems that translate() doesn't care what transform-origin is and uses top-left point of the element to move it.

Here is a test to confirm it:

<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>

As you can see, bot items are overlapped while it shouldn't.

Question: How to position an element using its center point?

Note: As I'm rotating & moving these items using JS, so just subtracting half of item's width/height is not an option because it needs math that I don't know.