html - 在书写模式中设置垂直居中

Question

我有一个带有一些文本和 writing-mode: vertical-rl 的 div。现在我希望这段文字位于中间，但 vertical-align: middle; 即使设置 line-height 也不起作用。

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

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

我该怎么做？

Answer 1

使用css3 flexbox 概念，将以下代码添加到您的样式表中，效果很好

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

我添加了下面的代码段。

.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>