HTML/CSS

【flexbox】position要らず?要素の中央にテキストを配置する方法

よく見るレイアウトで、背景画像の中央にテキストが配置されているデザインってありますよね。

コーディングに慣れた人なら、サクッと書いてしまうのですが、初心者からするとなかなかの難題です。

 

有名なのは「position」を使う方法ですが、flexboxを使った方法があったので、忘備録として残しておきたいと思います。

 

flexboxを使って要素の中央にテキストを配置

See the Pen
PrJWBM
by kei (@kei_01011)
on CodePen.

こんな感じで、要素の中央にテキストが配置できます。

必要なコードは、親要素に対して以下のコードを記述するだけ。

display: flex;

justify-content: center;

align-items: center;

 

「margin:0 auto;」とか、「position:relative;」を使わなくていいのは助かります。特にpositionは理解するのに時間がかかり、いまだにじっくり考えてしまいます。

 

flexboxは超便利

floatを学んでから、すぐにBootstrapのグリッドシステムを学習したので、flexboxについては、しっかり理解していませんでした。

 

調べてみると、めちゃくちゃ便利ですね。

画像の位置を交互に入れ替えたレイアウトだったり、要素を下で揃えたり、よく使いそうなものばかりで、覚えておいたほうがいいですね。