absoluteを使わない中央寄せ

要素を中央寄せするとき、これまでは親要素にposition: relative;をしてposition:absolute;で位置を指定していました。

これまで通りabsoluteを使って中央寄せをしてもいいのですが、もっと簡単な書き方がないのか探したところgridを使うと実現できそうなので試してみました。以下のようなメリットがあります。

• 親要素のことを考えなくて良い
• absoluteにすると要素の高さが消えるが、gridなら消えない
• absoluteよりも短い記述で中央寄せを実装できる

display:gridで中央寄せ

結論のコードです。
このあと解説をしています。

    <div class="l-container">
      <p>中央寄せ（要素が1つ）</p>
      <div class="center first">
        <img
          class="image"
          src="./img/ebi.png"
          alt="えび"
          width="400"
          height="396"
        />
      </div>
      <p>中央寄せ（要素が2つ）</p>
      <div class="center second">
        <img
          class="image"
          src="./img/ebi.png"
          alt="えび"
          width="400"
          height="396"
        />
        <img
          class="image"
          src="./img/ebi.png"
          alt="えび"
          width="400"
          height="396"
        />
      </div>
    </div>

.l-container {
  max-width: 1200px;
  margin: 100px auto;
}

.center {
  background-color: #f0f0f0;
  border: solid 4px skyblue;
  width: 300px;
  height: 300px;
  margin-bottom: 60px;
}
.center.first {
  display: grid;
  place-content: center;
}
.center.second {
  display: grid;
  place-content: center;
  place-items: center;
}

.image {
  width: 100px;
  height: auto;
}

HTMLの解説

特に難しいことはしていません、中央寄せにしたいエビフライの画像をcenterの中に入れました。firstとsecondのclassは、CSSで扱いためにつけています。

CSSの解説

中央にしたいアイテムがひとつの場合

わかりやすいように、背景色とborderをつけています。

firstのアイテムには、以下の指定をしました。

.center.first {
  display: grid;
  place-content: center;
}

あまり見慣れないplace-content: center;は、Flexでよく使うプロパティの省略形です。
place-content: center;と一行書くだけで、align-content: center;とjustify-content: center;を指定できるショートハンドです。

中央にしたいアイテムがふたつの場合

place-contentではなくplace-itemsを使います。理由は後述します。

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

place-items と place-contentの違い

place-items: centerはセルの中で中央をとります。
place-content: centerは、グリッドの全体をみて中央をとります。

中央に寄せたいアイテムが2つある場合は、place-content: centerを使います。
place-items: centerをしても、セルの中の中央しかとれないので全体の中央にならないためです。

gridを使った中央寄せはおすすめ！

Flexboxを使った中央寄せよりも、複雑なデザインに対応できるのがgridの強みです。
これまで中央寄せといったらabsoluteしか使ってこなかったので、gridを使った方法も積極的に取り入れていきたいです。