writing-mode:vertical-rl下表格<th>文本的水平居中方法

当你使用writing-mode: vertical-rl后，文本的排版方向被旋转，常规的text-align: center会改变作用轴，不再控制你想要的水平（横向）居中。以下是两种可靠的解决方法：

方法1：Flex布局实现双向居中 #

将表头单元格设置为Flex容器，通过justify-content和align-items确保内容在两个方向上都居中，适配任意排版方向：

th:not(:first-child) {
  writing-mode: vertical-rl;
  display: flex;
  justify-content: center;
  align-items: center;
}

这种方法无需固定单元格宽度，能自动适配内容，是最灵活的方案。

方法2：结合文本对齐与自动边距 #

在垂直排版模式下，text-align: center控制垂直方向的对齐，搭配margin: auto实现横向居中，同时建议给单元格设置固定宽度以确保布局稳定：

th:not(:first-child) {
  writing-mode: vertical-rl;
  text-align: center;
  margin: auto;
  width: 60px; /* 根据实际需求调整宽度 */
}

内容的提问来源于stack exchange，提问作者Adrien Hingert