Why does positioning absolute elements to the left center the child?

Issue

This is nothing more than a request for someone to explain the logic behind these few CSS lines. I'm making a timeline for a website but am confused on why this code works.

I have a class timeline_circle that is positioned absolute to timeline_center. In the timeline_circle class, I move it left:50; and transform: translateX(-50%); which centers the timeline_circle. I can't wrap my head around why this works.

Full code

.timeline_center{
    background-color: var(--darkGrey);
    width: 0.5vw;

    border-radius: 1vh;
    justify-self: center;
    grid-area: timeline;

    position: relative;
}

.timeline_circle{
    width: 2vw;
    height: 2vw;

    border-radius: 1vw;
    background-color: var(--oceanBlue);

    position: absolute; 
    left: 50%;
    transform: translateX(-50%);
}

Centered Circle in timeline Image Link

Solution

Basically, this is one of the tricks that is used for centering elements inside the parent, and the explanation is :

position: absolute will make that element move according to his first parent, in your case the .timeline_center is defined as parent by position:relative

when you use left: 50% that element moves from the left side of the parent for 50% of the parent's width, but remember that the TOP LEFT corner of the child moves for that amount.

So now, we have to make sure the center of the child is in middle, and not the TOP LEFT of it. We use transform: translateX(-50%) that makes the child move to the left direction for 50% of ITS width (child width) and now the center of the child is centered inside the parent

Answered By - Farhad Faraji