cssで縦書き、横書きの要素内中央寄せ

縦書きの文字を画面中央寄せ

まず横書きの文字を画面の中央寄せにするパターン

共通html,css

html

<div class="outer">
  <div class="inner">
    hogehoge<br>fugafuga
  </div>
</div>

css

.outer{
  position:relative;
  width:100%;
  height:100%;
}

パターン1（innerの高さが決まっている場合）

css1

.inner{
  width:300px;
  height:300px;
  position:absolute;
  top:50%;
  left:50%;
  margin-left:150px;
  margin-top:-150px;
  /* margin-left:-50%;としたいけど、marginが%を参照するときは包含ブロック（自分を囲っている要素の横幅を基準に計算する） */
  /* 仮にouterのwidth:100%;が1000pxの値だとすると.innerのmargin-left:-50%;は-500pxになってしまう */
}

css2

.inner{
  width:300px;
  height:300px;
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  left:0;
  margin:auto;
}

これは解説が面倒（よくわかってない）のでposition: absolute; の指定で要素が上下左右中央配置になる理由を見て下さい。
よしこさんのスライドもわかりやすいです。スライド抜粋

パターン2（innerが可変する場合）

css1

.inner{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%, -50%);
  /* marginで%を指定すると包含ブロックを基準に考えるがtranslateは自分自身を基準に考えてくれるので-50%でも問題ない */
}

ちなみにdivタグをもう一つ増やして、tableとtable-cellを使ってvertical-align:middle;を使用する方法もありますが割愛しました。

やっとこさ縦書きの中央寄せに

ちなみに縦書きにするときは

css

.inner{
  writing-mode: vertical-rl;
}

を指定しましょう。

さて縦書きの中央寄せなのですが、上記のパターンの１つを使うと可能です。

css1

.inner{
  position:absolute;
  top:50%;
  left:50%;
  display:inline;
  transform:translate(-50%, -50%);
  /* marginで%を指定すると包含ブロックを基準に考えるがtranslateは自分自身を基準に考えてくれるので-50%でも問題ない */
}

transformを利用した中央寄せにdisplay:inline;を指定しました。
こうすることで中のdiv.innerは可変長になり、その大きさを基準に中央に配置されます。
つまり縦書きでも中央寄せできるというわけです。
結構無理矢理感ありますが、jsのライブラリを使ったりするよりもいいと思ってます。

ちなみにdiv.innerがdisplay:block;だと縦書きにした瞬間に右寄せしかできなくなります。

誰かの助けになれば！