複数行のテキスト要素を真ん中へ配置する（display table/table-cell）

複数行のテキスト要素を真ん中へ配置するにはdisplay table/table-cellを使う。

対応ブラウザ ie8以降

display table/table-cellの使い方

html

<div class="parent">
  <span class="child">テキスト</span>
</div>
<div class="parent">
  <span class="child">テキスト<br>テキスト</span>
</div>
<div class="parent">
  <span class="child">テキスト<br>テキスト<br>テキスト</span>
</div>

css

.parent {
  height: 200px;
  display: table;
}

.child {
  display: table-cell;
  vertical-align: middle;
}

親要素に「display: table;」
子要素に「display: table-cell;」、「vertical-align: middle;」
を設定する。