I have to show a short paragraph of Japanese characters centering both horizontally and vertically. I use this technique, and it worked well on Google Chrome, but not on 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>