◆ Flexbox で使われてたから上下左右中央揃えできるのかと思ったけど違った
◆ Flexbox だと justify-items は無意味で justify-content が必要
◆ place-items は Grid 用で Flexbox で使う必要ないものだった
Vite のテンプレートを見てると place-items という CSS プロパティを使用していました
https://github.com/vitejs/vite/blob/main/packages/create-vite/template-vanilla/style.css

body {
	margin: 0;
	display: flex;
	place-items: center;
	min-width: 320px;
	min-height: 100vh;
}

初めて見る機能です
MDN を見てみると align-items と justify-items をまとめて設定できるものらしいです
https://developer.mozilla.org/en-US/docs/Web/CSS/place-items

これまで中央揃えのために justify-content と align-items を別々に書いてたけどまとめて指定できたなんて と衝撃を受けていたのですがよく見ると justify-items
justify-content ではないみたいです

実際に試してみても中央揃えにはなってません

<!doctype html>
<style>
	div {
		display: flex;
		width: 400px;
		height: 400px;
		place-items: center center;
		border: 1px solid gray;
	}
</style>
<div>text</div>

上下は中央揃えですが 左右は左端になってます
やっぱり justify-content とは異なるようです
MDN を見てみたのですが イマイチ意味がわかりません
https://developer.mozilla.org/en-US/docs/Web/CSS/justify-items

名前から考えると 横に並べる flex-direction が row の場合は

justify ⇨ 横方向
align ⇨ 縦方向
content ⇨ 要素全体の位置
items ⇨ それぞれの要素の位置

となっています
一番高さが高い要素に合わせて各要素の領域が確保されて その中で上に揃えるのか下に揃えるのかといったことを指定するのが align-items です
となると justify-items は各要素が確保された領域内で左に揃えるのか右に揃えるのかとなるはずです
しかし Flexbox で横に並べる場合はその要素のサイズそのものが確保される幅となるので 意味のない指定になる気がします

事前に横幅も確保されるとなると Grid 用でしょうか
Grid の説明を見ると justify-items が使われていました
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout#justifying_items_on_the_inline_axis

Vite のテンプレートで使用されていたのが Flexbox に対してだったので混乱しましたが 通常は Flexbox では使う必要のないプロパティのようです
なんで place-items 使ってるんでしょうね
Grid の予定だったのをあとから Flexbox にしたとかなんでしょうか