【CSS】ファーストビューや画像上のテキストなど、要素を中央、真ん中に配置する方法

2024年7月12日2024年8月1日

皆さんこんにちは！IWACODEの岩村です。

今回はHTML/CSSコーディングにおいて避けては通れない、要素の真ん中寄せについて解説いたします。

真ん中寄せはWEBサイト上でかなりの頻度で実装する必要があるということと、仕組みについて理解することで、コーディングの知識が大きく高まるのかなと個人的には感じております。

今回記事を読んでいただくことによって、もう真ん中寄せでは悩まなくなると思います！

ぜひ最後まで読んでいただけると嬉しいです！

真ん中寄せをする方法について

真ん中寄せをする方法は大きくわけて４つ方法があり、それぞれ解説させていただきます！

display:flexを使用する方法

<div class="box wrap">
  <div class="item"></div>
</div>

<style>
  .box {
    width: 500px;
    height: 300px;
    background-color: rgb(209, 252, 245);
  }

  .item {
    background-color: rgb(0, 200, 200);
    width: 100px;
    height: 100px;
  }

  .wrap {
    display: flex;
    justify-content: center;
    align-items: center;
  }
</style>

wrapクラスに以下のCSSを適用しています。

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

まずはwrapクラスの要素に対して、display:flexを適用させます。
そうすることによって子要素（.item）がflexボックスとして操作できるようになります。
これを利用し、justify-content: centerで水平方向（←→）に対して真ん中寄せ、align-items: center; で垂直方向（↑↓）に対して真ん中寄せを行い、結果的に真ん中寄せを実現させています。

この方法でも特に問題はないのですが、真ん中寄せのためにCSSを３行使用しているため、可能であればもっと短い記載で実現させたいところです。
ということで次の方法が個人的にはオススメです！

display:gridを使用する方法

<div class="box wrap">
  <div class="item"></div>
</div>

<style>
  .body {
    padding: 40px;
  }

  .box {
    width: 500px;
    height: 300px;
    background-color: rgb(209, 252, 245);
  }

  .item {
    background-color: rgb(0, 200, 200);
    width: 100px;
    height: 100px;
  }

  .wrap {
    display: grid;
    place-items: center;
  }
</style>

wrapクラスに以下のCSSを適用しています。

  .wrap {
    display: grid;
    place-items: center;
  }

こちらでは上記の2行で真ん中寄せが実現可能です。

display:gridにてgridレイアウト化し、place-item: centerでgridコンテンツかしている要素（.item）を真ん中に寄せています。

コーディングを行う上で、この方法が一番記述が短く、楽に実現ができるのでかなりオススメな方法になります！

positionを使用する方法

<div class="box wrap">
  <div class="item"></div>
</div>

<style>
  .body {
    padding: 40px;
  }

  .box {
    width: 500px;
    height: 300px;
    background-color: rgb(209, 252, 245);
  }

  .item {
    background-color: rgb(0, 200, 200);
    width: 100px;
    height: 100px;
  }

  .wrap {
    position: relative;
  }

  .wrap .item {
    position: absolute;
    inset: 0; /* top: 0; right: 0; bottom: 0; left: 0; の略 */
    margin: auto;
  }
</style>

wrapクラスにposition: relativeを指定し、positionの基点にします。
子要素である.itemに対して、position: absolute; inset: 0; margin: auto; を指定します。

  .wrap {
    position: relative;
  }

  .wrap .item {
    position: absolute;
    inset: 0; /* top: 0; right: 0; bottom: 0; left: 0; の略 */
    margin: auto;
  }

こちらの方法でも真ん中寄せにはできるのですが、ちょっと記載量が多いです・・・

insetプロパティはpositionプロパティと併用して使用する、top/right/bottom/leftのショートハンドプロパティです。

上下左右に値を0で指定し、さらに上下左右の余白をautoにすることで、.itemを真ん中寄せにしています。

通常真ん中寄せにするのであれば、display:flexやdisplay:gridで指定する方がすっきりしますし見やすいのでそちらをオススメします。

ですが、子要素の方が親要素より大きい場合、上記の方法では実装ができません。

次に実装する方法では、親要素より子要素が大きい場合でも、真ん中寄せにすることが可能です。

positionを使用する方法（親要素より子要素が大きい場合）

<div class="box wrap">
  <div class="item"></div>
</div>

<style>
  .body {
    padding: 40px;
  }

  .box {
    width: 500px;
    height: 300px;
    background-color: rgb(209, 252, 245);
  }

  .item {
    background-color: rgb(0, 200, 200);
    width: 100px;
    height: 100px;
  }

  .wrap {
    position: relative;
  }

  .wrap .item {
    position: absolute;
    inset: 50% auto auto 50%;
    transform: translate(-50%, -50%);
  }
</style>

wrapクラスにposition: relativeを指定し、positionの基点にします。
子要素である.itemに対して、position: absolute; inset: 50% auto auto 0; transform: translate(-50%, -50%); を指定します。

  .wrap {
    position: relative;
  }

  .wrap .item {
    position: absolute;
    inset: 50% auto auto 50%;
    transform: translate(-50%, -50%);
  }

これを説明すると、insetプロパティにてtop: 50%,left50%で.itemを移動させます。この状態では以下のようになります。