知名度が低いウェブ標準ひとり 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 の「例」の節あたりをご覧ください。
おしまい
昔は縦方向の中央寄せって面倒で色々ハックというかテクニックみたいなのあったんだけど、現代ではもうこれ一本で戦えます。サンキューグリッド。