How to center text horizontally and vertically in cojunction with 'writing-mode: sideways-lr'?

问题

I have a TD/DIV with some text inside. I made so that the text is displayed in the center of TD/DIV . But I want the text to be in center using writing-mode: sideways-lr. How can I do this?

div {
  width: 200px;
  height: 100px;
  text-align: center;
  vertical-align: middle;
  border: solid;
  display: table-cell;
}

.side {
  writing-mode: sideways-lr;
}

<div>My text</div>
<br>
<div class="side">My text</div>

Code here

回答1:

Consider an extra span where you apply the property and better use writing-mode: vertical-rl;transform: scale(-1); to have better support (your code works only on Firefox actually)

div {
  width: 200px;
  height: 100px;
  text-align: center;
  vertical-align: middle;
  border: solid;
  display: table-cell;
}

.side span {
  /* writing-mode: sideways-lr; */
  writing-mode: vertical-rl;
  transform: scale(-1);
}

<div>My text</div>
<br>
<div class="side"><span>My text</span></div>

来源：https://stackoverflow.com/questions/60958648/how-to-center-text-horizontally-and-vertically-in-cojunction-with-writing-mode