CSSを書くうえで、利用頻度が著しく高いのに書くのが割と面倒なのが、上下左右中央。Flexboxが登場して3行のコードで上下左右中央でき流ようになったけど、Gridを使えばさらに短い2行で済ませることができそう。

Gridを使って2行で上下左右中央

place-items を使う方法

place-itemsでalign-itemsとjustify-itemsをまとめることができる。

display: grid;
place-items: center;

place-content を使う方法

place-contentはalign-contentとjustify-contentをまとめることができる。

display: grid;
place-content: center;

ブラウザ対応状況

{{}}

---

でも、Flexは2行では書けない...？

Twitterでplace-itemsの存在を知ったのですが、そこではdisplay: flex;を使ってました。でも、実際にコードにしてみると動かない...？

justify,align,content,items のまとめ

justify系は主軸、align系は交差軸

content系は余白間隔、items系はアイテムの配置

Flexでは効かないプロパティがいくつかある

折り返しさせないflex-wrap: nowrap;の場合（初期値）、align-contentは効かない。また、Flexではjustify-itemsが機能しない。

	nowrap(初期値)	wrap
align-content	-	●
align-items	●	●
justify-content	●	●
justify-items	-	-

なので、Flexでも無理やりplace系使うことはできるけど、結局place-contentとplace-itemsを指定する必要があるので3行になってしまう。

display: flex;
place-content: center;
place-items: center;

なので、flexを使うなら大人しく今まで通りでいいのかな。

display: flex;
align-items: center;
justify-content: center;

---

どうなんだろ、自分のミスな気もするけど、ツイート主さんに確認する勇気もない...笑

▶︎Tweet @takamosoo - Twitter

▶︎flexのalign-items と align-content と justify-content と justify-items の違い - Qiita