グリッド
place-content 行方向と列方向の揃えをまとめる
意味
align-content と justify-content を、一つにまとめた指定です。place-content: center は、余白があるときに中身を中央へ寄せます。
親に flex か grid が必要です。子が親を埋めていると、寄せる余白が無く、見た目は変わりません。
コード
HTMLとCSSをコピーして、自分のファイルへ貼り付ければ同じ見た目を確認できます。
<div class="frame">
<span>中央</span>
</div>.frame {
display: grid;
place-content: center;
min-height: 8rem;
background: #efeef8;
}プレビュー
ブラウザ対応
| ブラウザ | 対応 |
|---|---|
| Chrome | 59〜 |
| Firefox | 45〜 |
| Safari | 9〜 |
| Edge | 79〜 |
| Chrome Android | 59〜 |
| Safari iOS | 9〜 |
出典: MDN Web Docs（`@mdn/browser-compat-data`）