当x轴位于顶部时使旋转的标签居中

当x轴位于顶部时，使旋转的标签居中可以通过以下步骤实现：

确定标签的宽度：首先，需要确定旋转标签的宽度。可以使用CSS的width属性或JavaScript的offsetWidth属性来获取标签的宽度。
计算标签的位置：根据标签的宽度，计算标签在x轴上的位置。可以使用以下公式来计算标签的位置： x = (containerWidth - labelWidth) / 2 其中，containerWidth是容器的宽度，labelWidth是标签的宽度。
设置标签的位置：使用CSS的transform属性来设置标签的位置。可以使用translateX()函数将标签水平移动到计算得到的位置。

以下是一个示例代码，演示如何将旋转的标签居中：

<!DOCTYPE html>
<html>
<head>
  <style>
    .container {
      position: relative;
      width: 400px;
      height: 200px;
      background-color: #f0f0f0;
    }
    
    .label {
      position: absolute;
      top: 0;
      left: 0;
      width: 100px; /* 假设标签的宽度为100px */
      transform-origin: top left;
      transform: translateX(calc((100% - 100px) / 2)) rotate(-90deg);
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="label">旋转的标签</div>
  </div>
</body>
</html>

在上面的示例中，.container类表示容器，.label类表示旋转的标签。通过设置标签的transform属性，将标签水平移动到居中位置，并且使用rotate()函数将标签旋转为垂直方向。

请注意，这只是一个示例代码，实际应用中可能需要根据具体情况进行调整。