知名度が低いウェブ標準ひとり Advent Calendar 2021 – 16 日目

今日は place-items です。align-items と justify-items の一括指定版です。

基本的な使い方

display: grid と一緒に使いましょう。

1
2
3
4
.pinCenter {
  display: grid;
  place-items: center;
}
1
2
3
<div class="pinCenter">
  CENTER!
</div>

上下左右中央寄せの様子。

他に display: flex でもこのプロパティは使えます。（縦横中央寄せにはならない。）

仕組み

MDN の「例」の節あたりをご覧ください。

おしまい

昔は縦方向の中央寄せって面倒で色々ハックというかテクニックみたいなのあったんだけど、現代ではもうこれ一本で戦えます。サンキューグリッド。