具有绝对位置的Div不等同于定位

Question

正如你在下面的屏幕截图中看到的那样，我的垂直div的技能标题（编码，框架，方法）并不等同。

请告诉我出了什么问题，我的CSS知识现在有点生疏了。 ：）

.vc {
    align-items: center;
    display: flex;
    flex-direction: row;
    justify-content: left;
}

.skill .title {
    left: -15px;
    padding: 5px 25px;
    position: absolute;
    text-align: center;
    text-transform: uppercase;
    top: 0;
    transform: rotate(90deg);
}

Answer 1

由于标题上的转换属性，可能会发生这种情况。默认情况下，transform-origin是您正在转换的框的中心。由于文本长度以及因此标题之间的框宽度不同，因此相对于主要内容会产生不同的定位旋转点。

您可能想尝试将变换原点移动到左侧中间位置＆＃39;