CSS Текст по центру по горизонтали и вертикали в сочетании с «режим письма: sideside-lr»

Question

У меня есть TD / DIV с текстом внутри. Я сделал так, чтобы текст отображался в центре TD / DIV. Но я хочу, чтобы текст был в центре, используя writing-mode: sideways-lr. Как я могу это сделать?

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>

Код здесь

ОБНОВЛЕНИЕ Решение ниже не работает в Firefox: Простая таблица с первым вертикальным рядом строк

.grf_tabel {
  width: 100%;
  border-collapse: collapse;
}

.grf_tabel td {
  /*text-align: center;*/
  vertical-align: middle;
  border: solid;
}

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

  <table class="grf_tabel">
     <tr>
        <td class="grf_arie" rowspan="3"><span>Section bla bla bla</span></td>
        <td>First item - bla bla bla</td>
      </tr>
      <tr>
        <td>Another item here</td>
      </tr>
      <tr>
        <td>Here another one</td>
      </tr>
  </table>

Answer 1

Рассмотрим дополнительный интервал, в котором вы применяете свойство, и лучше используйте writing-mode: vertical-rl;transform: scale(-1); для лучшей поддержки (ваш код работает только на Firefox на самом деле)

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>