Firefox下writing-mode:vertical-rl时vertical-align失效，求居中方案

在Firefox中，当使用writing-mode: vertical-rl时，vertical-align: middle无法像Chrome那样正常生效，这是因为两款浏览器对垂直书写模式下表格单元格的对齐规则解析逻辑不同。可以通过以下两种方法解决：

方法一：使用Flex布局（推荐） #

将表格单元格设置为flex容器，利用flex的对齐属性实现跨浏览器的居中效果，这是最灵活且兼容性优异的方案：

table{width: 100%;}
table td{border:solid 1px #333}
.ver td{
  writing-mode: vertical-rl;
  display: flex;
  align-items: center; /* 控制文本在单元格水平方向（原垂直方向）的居中 */
  justify-content: center; /* 控制文本在单元格垂直方向（原水平方向）的居中 */
  padding:5px;
}

对应的HTML保持不变：

<table>
<tbody>
<tr><td>1</td><td>2</td><td>3</td></tr> 
<tr class="ver"><td>this is a test</td><td>this is a test</td><td>this is a test</td></tr> 
<tr><td>1</td><td>2</td><td>3</td></tr> 
<tr><td>1</td><td>2</td><td>3</td></tr>
</tbody> 
</table>

方法二：调整文本对齐与行高（适配固定高度场景） #

如果单元格高度固定，可以结合text-align: center和行高设置来实现居中：

.ver td{
  writing-mode: vertical-rl;
  text-align: center;
  line-height: 100px; /* 数值需与单元格高度一致 */
  padding:5px;
}

这种方法适合单元格高度固定的场景，灵活性不如Flex布局。

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