LoginSignup
18

More than 5 years have passed since last update.

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

Posted at

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

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

共通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;
}

を指定しましょう。

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

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;だと縦書きにした瞬間に右寄せしかできなくなります。

誰かの助けになれば!

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
18