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

css

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

早速。

スポンサーリンク

CSS記述方法

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

 

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

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

 

参考

上下中央揃えのCSSまとめ。Gridだと2行、Flexboxだと3行で実現可能 - ICS MEDIA
CSSでブロック要素を上下中央揃え（天地左右の中央に配置）する方法はいくつかありますが、CSS Gridを使う方法が現在では一番手軽です。CSSGridレイアウトを使うと、たった2行で上下中央揃えができます。
ics.media
スポンサーリンク

コメント