CSSでテキストを垂直方向に中央揃えにする4つの方法

こんにちは、つばさ（@tsubasa123）です。

脱CSS初心者に向けて絶賛勉強中の私ですが、今日はタイトル通り、テキストを中央揃えにする方法を勉強しましたのでメモしておきます。これは意外とカスタマイズでも使う機会が多いのでしっかりと覚えておきたいところです。

テキストが1行で固定の場合
複数行だけど行数は固定の場合
複数行でさらに行数が可変の場合1
複数行でさらに行数が可変の場合2
さいごに

テキストが1行で固定の場合

<div class="wrapper">
<p class="contents">ここにテキストが入ります。</p>
</div>

今回、ベースとなるHTMLは上記になります。これに対してCSSでスタイルを適用することで垂直方向に中央揃えにする方法を試していきたいと思います。

まずは簡単なやつから。

ここにテキストが入ります。

.wrapper1 {
width: 50%;
height: 100px;
border: 1px solid #dfdfdf;
text-align: center;
margin: 40px auto;
}
.contents1 {
line-height: 100px;
}

テキストが1行になると分かっているときは、line-heightプロパティに外枠の高さと同じ値を指定すれば中央揃えになります。シンプルで簡単。昔、一番最初に教えてもらったやり方がこれでしたね。

複数行だけど行数は固定の場合

テキストが複数行になると先ほどのテクニックは使えなくなります。色々調べた感じだと、行数が固定の場合はpositionプロパティを利用して中央揃えにしている例をよく見かけました。

ここにテキストが入ります。
ここにテキストが入ります。

.wrapper2 {
width: 50%;
height: 100px;
border: 1px solid #dfdfdf;
text-align: center;
margin: 40px auto;
position: relative;
}
.contents2 {
position: absolute;
width: 100%;
top: 50%;
margin-top: -1em;
}

やっていることとしては、

親要素を相対配置に指定
子要素を絶対配置に指定し、上辺の起点を親要素の真ん中に配置
さらに子要素を文字の高さ分だけ上にずらす

といった感じですね。先の例ではテキストが2行なので、その半分の1行分だけ上にずらすことで中央揃えを実現しています。テキストの行数が増えた場合は、テキストの行数 / 2を指定してあげればしっかりと中央揃えになるはずです。

.wrapper {
width: 50%;
height: 100px;
border: 1px solid #dfdfdf;
text-align: center;
margin: 40px auto;
position: relative;
}
.contents {
position: absolute;
width: 100%;
height: 2em;
top: 0;
bottom: 0;
margin: auto;
}

同じような絶対配置を利用したやり方でこんなものもありました。こっちのほうがなんかトリッキーなことをしているように見えます。こちらは行数が増えたらheightプロパティを変更して調整する必要があります。

複数行でさらに行数が可変の場合1

一番よくあるケースじゃないでしょうか。昔はこのタイプの対応は大変だったと聞きますが、最近はdisplayプロパティにtable-cellを利用すれば意外と簡単に実現できるみたいです。

ここにテキストが入ります。
ここにテキストが入ります。

.wrapper {
width: 50%;
height: 100px;
border: 1px solid #dfdfdf;
text-align: center;
margin: 40px auto;
display: table;
}
.contents {
display: table-cell;
vertical-align: middle;
}

displayプロパティにtable-cellを利用することで、子要素に対してvertical-alignプロパティを適用することができるようになり、これで中央配置を実現します。vertical-alignプロパティは本来はブロック要素ではなくインライン要素にしか適用できないのですが、table-cellが指定された要素に対しても利用可能になるようです。

ちなみに、table-cellを利用できるのはIE8以上のようです。もう使ってもいいよね、って時代になりましたね。やったね。結構前からみんな使っているのは知っていましたが、自分で調べて試してみたのは初めてでした。

複数行でさらに行数が可変の場合2

もうひとつ、今度はCSS3のFlexible boxとかいうプロパティを利用したパターン。これも存在は知っていましたが調べるのは初めて、というか試して使うのも初めてでした。詳細はMDNのリファレンスをどうぞ。

ここにテキストが入ります。
ここにテキストが入ります。

.wrapper5 {
width: 50%;
height: 100px;
border: 1px solid #dfdfdf;
text-align: center;
margin: 40px auto;
display: flex;
align-items: center;
justify-content: center;
}