コンテンツを上下中央に配置する3つの方法

コンテンツは内容が増減することを想定した指定方法です。コンテンツが増減しなくとも、コンテンツ幅によって改行タイミングが変わった場合も対応するように作るのが今どきのｺｰﾃﾞｨﾝｸﾞｯ

HTML例

<div class="box"> <div class="inner"> <p>ここに内容が色々はいります。ここに内容が色々はいります。<br> ここに内容が色々はいります。<br> ここに内容が色々はいります。</p> </div> </div>

display:flexを使う

親要素に対してdisplay:flexとalign-items:centerで直下の要素が真ん中に配置されます。

例

表示

ここに内容が色々はいります。ここに内容が色々はいります。
ここに内容が色々はいります。
ここに内容が色々はいります。

ソース

.box { display: flex; align-items: center; height: 400px; background: #ccc; }

メリット

記述がシンプルです。

デメリット

CSS3なので古いブラウザには対応していません。2013年以前のアンドロイドブラウザは対応しておらず使うのを時々ためらいます。

display:tableを使う

例

表示

ここに内容が色々はいります。ここに内容が色々はいります。
ここに内容が色々はいります。
ここに内容が色々はいります。

ソース

.box { display: table; width: 100%; height: 400px; background: #ccc; } .box .inner { display: table-cell; vertical-align: middle; }

メリット

CSS2なので比較的古いブラウザも問題なく表示されます。古来からあるいにしえの指定のため信頼性が高い。

デメリット

table-cellにはoverflow、height、marginが指定できません。

positionとtransformを使う

親にposition:relativeをかけて子にposition:absolute;でtop:50%;とすると親要素の真ん中からコンテンツを開始します。そこにtransform:translate()でコンテンツの高さの半分を上に持ち上げる事ができます。結果、上下中央に表示されます。

例

表示

ここに内容が色々はいります。ここに内容が色々はいります。
ここに内容が色々はいります。
ここに内容が色々はいります。

ソース

.box { position: relative; height: 400px; background: #ccc; } .box .inner { position: absolute; top: 50%; left: 0; width: 100%; transform: translate(0,-50%); }

メリット

ブラウザのバージョンによってはflexの方法が対応していない場合、こっちの方法が対応してる場合があります。

デメリット

transformはCSS3なので古いブラウザには対応しません。他の2つの方法と比べて記述が少々多くなります。