Position Element Using Center of Element?

Question

I am trying to make an element that has position: absolute; and is positioned using percentages. The thing is, it is not positioned using the center, rather, using the left corner. Is there a way to do this using pure CSS? The element is a flexbox, so there's no fancy tricks with the display CSS property. Here is my code.

#whateverDiv{
    display: flex;
    left: 25%; /* Uses left corner of element. I want to make it use the center of the element. */
}

Also, this is not a duplicate of here because the OP asked to center the element using percentage. I need to position it anywhere, such as 25%.

Answer 1

You could do this using css transforms if that's fine

#whateverDiv{
    display: flex;
    left: 25%;
    transform: translateX(-50%)
}

Answer 2

Try 'transform-origin' perhaps?.

div {
    -webkit-transform-origin: 50% 50%; /* Chrome, Safari, Opera */
    -ms-transform-origin: 50% 50%; /* IE 9 */
    transform-origin: 50% 50%;
}