表格表头旋转90度或270度后的文本居中对齐问题

1. 属性拼写错误：CSS中定义的g-origin为无效属性，正确的变换原点属性为transform-origin，该属性缺失导致旋转原点配置不生效。
2. 对齐配置错误：text-align: left为左对齐配置，且CSS transform是对元素整体做平面变换，仅调整文本对齐无法修正变换后的整体位置偏移。
3. 盒模型适配问题：元素旋转后盒模型占位仍保留旋转前的水平尺寸，会和单元格边界产生错位，导致视觉上无法居中。

推荐两种可行方案：

方案1：修正transform配置（适配原有写法） #

补充变换偏移修正，同时调整单元格基础对齐属性：

<style>
/* 给th设置基础布局属性，保证单元格内容有居中容器 */
th {
  width: 60px; /* 可根据表头文本长度调整固定宽度 */
  height: 140px; /* 可调整为需要的表头高度 */
  vertical-align: middle;
  text-align: center;
}
.myClass {
  white-space: nowrap;
  /* 先旋转270度，再沿Y轴偏移自身宽度的50%，抵消旋转带来的位置偏移 */
  transform: rotate(270deg) translateY(50%);
  transform-origin: center center;
}
</style>

原有HTML表格代码无需修改即可生效。

方案2：使用writing-mode实现（更适配表格场景，无需手动计算偏移） #

直接用CSS书写模式属性实现竖排文本，适配性更强：

<style>
th {
  width: 60px;
  vertical-align: middle;
  text-align: center;
}
.myClass {
  white-space: nowrap;
  writing-mode: vertical-rl; /* 实现竖排从右到左排列 */
  transform: rotate(180deg); /* 翻转180度得到从上到下的正序竖排 */
}
</style>

内容的提问来源于stack exchange，提问作者rahul sharma