【コピペ可】HTMLボックス要素内でテキストを縦横真ん中にする方法- flex版

HTMLコーディング時に縦横真ん中にコンテンツ要素を持ってきたい場合の開発メモです。

早速。

CSS記述方法

.container {
  display: flex;
  justify-content: center;
  align-items: center;
}

flexを使うことで、簡単に縦横真ん中に持ってくることが可能になりました。

すごく便利なのでこれから使う頻度が上がりそう。

参考

上下中央揃えのCSSまとめ。Flexboxがたった3行で最も手軽 - ICS MEDIA

CSSでblock要素を上下中央揃え（天地左右の中央に配置）する方法はいくつかありますが、CSSのFlexboxを使う方法が現在では一番手軽です。中央揃えしたい要素の親に対してたった3行記述するだけです。最新ブラウザはもちろん、InternetExplorer 11（以下、IE 11）でもベンダープレフィックスなしで動...

ics.media