如何使用CSS实现表格中vertical-rl垂直排版文本的水平对齐

当使用writing-mode: vertical-rl切换为垂直书写模式后，CSS对齐属性的生效轴向会跟着书写模式转换，常规的text-align和vertical-align在表格单元格中无法直接达到你要的水平居中效果，可通过修改单元格布局为Flex实现需求，兼容Firefox 91及以上版本：

修改后的CSS代码如下：

td {
  writing-mode: vertical-rl;
  display: flex;
  justify-content: center;
  align-items: center;
  /* 若需要固定单元格高度可额外加height属性 */
}
td, th {
  border: 1px solid black;
}

如果需要文本靠右对齐，把justify-content: center改成justify-content: flex-end即可。

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