【CSS】要素を中央寄せしたいときに用いる手法3選

はじめに

※こちらはフロントエンド初心者のかた向けの記事になっています。
CSSによって要素を中央寄せしたいときによく用いていた手法を3選紹介します。

その1　display:flexを用いた中央寄せ

中央寄せしたい要素の親要素に対して下記のようなflexを付与させます。そうすることで子要素は中央寄せになります。この手法を用いる場合、子要素は1つのみだと調整しやすいです。

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

その2　display:gridを用いた中央寄せ

中央寄せしたい要素の親要素に対して下記のようなgridを付与させます。そうすることで子要素は中央寄せになります。

1つの子要素を中央寄せしたい場合

          .parent-element {
            display: grid;
            place-content: center;
          }
        

複数の子要素をすべて中央寄せしたい場合

          .parent-element {
            display: grid;
            place-content: center;
            place-items: center;
          }
        

その3　position: absoluteを用いた中央寄せ

中央寄せしたい要素の親要素に対してposition:relativeを付与させます。子要素にはposition:absoluteと一緒にtransformを付与することで中央寄せになります。position:abusoluteを用いてるのでレイアウトの崩れが起きないように気をつけてください。

        .parent-element {
          position: relative;
        }
        .child-element {
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
        }
      

さいごに

X軸方向に中央寄せをする手法は色々思いつくと思いますが、Y軸方向に中央寄せをする方法もいくつか思いつけるようになったら一歩前進ですね。