Setting vertically middle in writing-modes

Question

I have a div with some text and writing-mode: vertical-rl. Now I want to this text be in the middle but vertical-align: middle; don't work even with setting line-height.

.a{
      background-color: coral;
      writing-mode: vertical-lr;
      min-height: 10em;
      vertical-align: middle;
      line-height: 2em;
  }

<div class="a">hiiiii<div>

How can I do this?

Answer 1

use css3 flexbox concept,add the following codes to your style sheet ,it works fine

  display:flex;
  justify-content:center;
  align-items:center;

I'm added the snippet below.

.a{
      display:flex;
      justify-content:center;
      align-items:center;
      background-color: coral;
      writing-mode: vertical-lr;
      min-height: 10em;
      line-height: 2em;
  }

<div class="a">hiiiii<div>

Answer 2

try using flexbox like this,

.a{
      display:flex;
      background-color: coral;
      writing-mode: vertical-lr;
      min-height: 10em;
      vertical-align: middle;
      line-height: 2em;
      justify-content:center;
      width:2em;
  }

<div class="a">hiiiii<div>