transform-origin equivalent for position absolute

Question

I got an element with unknown size with position=absolute, top=1000, left=1000.

Right now, the top left of that element is at position (1000,1000) but I'd want the center of the element to be (1000,1000).

Is there a way to do that with CSS alone?

Answer 1

As pointed out in the comments, you can simply use transform: translate(-50%,-50%) in order to center the element vertically/horizontally. Fortunately, this method works for dynamic values, which means that it will work well in your case since you don't know the width/height of the element.

For example:

.element {
  background: #f00;
  width: 100px;
  height: 100px;
  transform: translate(-50%,-50%);
  position: absolute;
  top: 50%;
  left: 50%;
}

<div class="element"></div>

For what it's worth, here are some alternative methods for vertical/horizontal centering.