为何绝对定位元素用left:50%+transform能实现居中？

你在制作网站时间线时，对这段CSS实现的居中逻辑有疑问，先把代码贴出来：

.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%);
}

下面拆解每一步的作用，帮你搞懂原理：

• 父元素position: relative的作用：给绝对定位的子元素.timeline_circle提供定位参考。默认绝对定位元素会以整个文档为基准，加上这个属性后，子元素就会相对于.timeline_center的位置来定位。

• left: 50%的作用：把.timeline_circle的左侧边缘对齐到父元素.timeline_center水平方向的中点。这时候你会发现蓝色圆圈是偏右的——因为圆圈本身有宽度，左侧在中点，整个元素的重心就跑到了父元素中点的右边。

• transform: translateX(-50%)的作用：让蓝色圆圈向左移动自身宽度的50%。这里的-50%是相对于元素自身尺寸计算的，刚好把圆圈的中心拉到父元素的中点位置，实现完全居中，也就是你看到的蓝色圆圈完美套在灰色竖线中心的效果。

补充一句：这种居中方式比硬写margin-left: -1vw更灵活——不管圆圈的宽度怎么改，transform的百分比都会自动适配，不用手动调整数值。

内容的提问来源于stack exchange，提问作者Larry-Larriee