• SEARCH

SEARCH

チェックボックスにチェックをつけたうえで検索すると、
該当のカテゴリ記事に絞り込むことができます。

ホームページ制作のご依頼・ご相談はCOLERSへ

SNIPPETのロゴ

Flexboxを使ってHTMLの要素を上下左右の中央寄せする方法

flexboxを利用した中央寄せレイアウト

HTMLの要素を上下左右の中央寄せ(センタリング)したいときに、
Flexboxを使ってかんたんに実現する方法をご紹介します。

実際のコード

<div class="box">
  <p>キレイに中央寄せができてるね</p>
</div>
.box {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 300px;
  height: 300px;
  background: cyan;
}

実装した結果

flexbox-center

実装についての補足と解説

FlexコンテナとFlexアイテム

display: flexの指定をした要素はFlexコンテナとなり、その子要素はすべてFlexアイテムとなります。

Flexコンテナに対しFlexbox専用のCSSプロパティを指定することで
Flexアイテムの位置関係を指定できることがFlexboxを使ったレイアウトの特徴です。

Flexコンテナに指定するCSSプロパティ

.box {
  justify-content: center;// 水平(横方向)の位置を中央に
  align-items: center;// 垂直(縦方向)の位置を中央に
}

最後に

Flexboxの利用に慣れてくると、HTMLの要素を意図したとおりに
レイアウトできるようになってきます。

今回ご紹介したのは単純な中央寄せのみでしたが、よく使う場面は多いと思いますので、
是非活用してみてください。

AUTHOR

Yasuhiro Yamamoto

Yasuhiro Yamamoto

福岡市在住のフリーランス。
WEBデザイナー、フロントエンドエンジニア、アプリーケーションエンジニア。
デザイン・ディレクション・実装など、企画〜完成まで一貫して承っている。

RECOMMEND