要素を縦中央揃えにする

デザインでよくある縦中央揃え。
cssだけで割と簡単にできます。レスポンシブにも対応できます。

ポイントは外側のレイアウトにdisplay:tableを、要素を囲むレイアウトにdisplay:table-cellを入れて疑似的にtableにしてしまうことです。tableになればvertical-alignが使えるので、middleに指定します。

HTML

<div class="wrapper">
    <div class="wrapper_left">
        <img src="demo/161012.png" alt="">
    </div>
    <div class="wrapper_right">
        テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト<br>
        テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト<br>
        テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト<br>
        テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト<br>
        テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト<br>
        テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト<br>
        テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト<br>
        テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト<br>
        テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト<br>
        テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト<br>
        テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト<br>
        テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト<br>
        テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト<br>
        テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト<br>
        テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト<br>
        テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト<br>
        テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト<br>
    </div>
</div>

CSS

    .wrapper{
        display: table;
        width: 100%;
        min-width: 300px;
        max-width: 980px;
        margin: 0 auto;
    }
    .wrapper_left{
        display: table-cell;
        padding: 10px;
        background: #b3ebff;
        text-align: center;
        vertical-align: middle;
    }
    .wrapper_right{
        display: table-cell;
        padding: 10px;
        background: #eaffb3;
        text-align: center;
        vertical-align: middle;
    }

デモページ

Related article