ベンダープレフィックス(-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>
こんなときに
- メインビジュアルの上にテキストを乗せたい
- 画像を真ん中に置きたい