可変サイズ・複数行にも対応 Flexboxを使った上下左右中央揃え

ベンダープレフィックス(-webkit-)は古いsafariやiOS・AndroidでFlexboxを効かせるために書いてます

.center_box {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-align-items: center; /* 左右中央揃えにしたくない場合は削除 */
    align-items: center; /* 左右中央揃えにしたくない場合は削除 */
}

<div class="center_box">
<h1>center_boxで囲ったこれらの要素は上下左右中央揃えで表示されます</h1>
<p>複数行でも大丈夫です</p>
<img src="hoge.jpg" alt="画像もOK">
</div>

こんなときに

• メインビジュアルの上にテキストを乗せたい
• 画像を真ん中に置きたい