css - span 中的文本在使用 flex 和 writing-mode 的 Firefox 中消失

Question

我必须显示一段水平和垂直居中的日文字符。我使用了这种技术，它在 Google Chrome 上运行良好，但在 Firefox 上运行不佳。

// div {
//    width: 300px;
//    height: 300px;
//    background: wheat;
// }

// span {
//    writing-mode: tb-rl;
//    display: flex;
//    justify-content: center;
//    align-items: center;
//    width: 100%;
//    height: 100%;
// }

div {
    width: 300px;
    height: 300px;
    background: wheat;
    display: flex;
    justify-content: center;
    align-items: center;
}

span {
    writing-mode: tb-rl;
    -moz-transform: translate(-50%,0);
    left:initial;
}

<div>
    <span>テスト<br>テスト<br>テスト</span>
</div>

Answer 1

非常感谢@fen1x 的回答。但是您的解决方案中仍然存在很多问题。 (见上面的更新版本)。最后，对于这种情况最好的办法是使用 position: absolute 而不是 display: flex。这也适用于 IE 11 和 IE Edge。

div {
  width: 200px;
  height: 200px;
  background: wheat;
  position: relative;
}

span {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  text-align: left;
  white-space: nowrap;
  writing-mode: tb-rl;
}

<div>
  <span>テストテスト<br>テストテストテスト<br>テスト</span>
</div>