CSS

A property that lets you position all the content inside a grid or flexbox — deciding how it sits vertically and horizontally at once.

place-content

やさしい説明

place-content は、コンテナの中の全体の並び方（たて・よこ）をまとめて指定できるプロパティです。

たとえばグリッドやフレックスボックスを使うとき、要素が「どの方向に・どの位置に」まとまるかを決められます。

つまり、「全体をどう配置するか？」を一括で決めるショートカットのようなものです。

使いどころ

こう書けばOK

CSS

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

上の例では、グリッド全体が「上下も左右も中央寄せ」になります。

もし縦と横を別々にしたい場合は、2つの値を並べて書けます。

CSS

.container {
    place-content: start center; /* 縦は上寄せ、横は中央寄せ */
}

ポイントまとめ