html - Moving An Absolute Position Element Based Off Of Its Center

Question

How would one move an absolute position element through CSS ideally by its center instead of its top left corner?

I currently have a circular element that I am adjusting via absolute positioning. I would like to move it based off of the center of the circle so that I can align it with a line on the background. The size of the circle is dynamic, and so is the background. Trying to get the red circle aligned to where the indigo meets the grey.

//Heres the code

https://jsfiddle.net/4akwe208/4/

Answer 1

I think this is what you are trying to do is to use CSS transforms property with the value translate.

#your-div-id {
    -ms-transform: translate(-50%, 50%); /* IE 9 */
    -webkit-transform: translate(-50%, 50%); /* Safari */
    transform: translate(-50%, 50%);
}