【HTML&CSS】要素を中央寄せする方法

「display:flex;」を使って中央寄せする

必要なCSSの記述は以下の3つ。

  1. display:flex;
  2. justify-content: center;
  3. align-items: center;

「display:flex;」で中央寄せするためのプロパティを適用できるようにする

「justify-content: center;」で左右の中央に要素を配置する

「align-items: center;」で上下の中央に要素を配置する

実装結果

上記の CSSを適用する前とした後で比較する

  • CSS適用なし
<div>
    <p>css適用なし</p>
</div>
  • CSS適応あり
<div class="center">
    <p>css適用なし</p>
</div>
.center{
 display: flex;
 justify-content: center;
 align-items: center;
}

まとめ

プロパティの多い「display:flex;」を使って中央寄せしました。

他の方法で中央寄せを行う事が増えた場合は追記しようと思います。

シェアする

フォローする