ちょっと良いUIおれおれAdvent Calendar 2024 – 19日目

中央に置こうと思うこと自体は普通だと思うんですが、面倒で諦めたのか、初期値のまま左 (start) 寄せになっているものをみかけます。簡単にできるからあきらめないで！

デモ：

place-items: center で中央に配置

align-items と justify-items をまとめて設定できるやつです。display: grid とご一緒にどうぞ。

.center {
  display: grid;
  place-items: center;
}

おしまい

まあ組み合わせになると面倒なこともしばしばありますがだいたい大丈夫なんでコピペでどうぞ。

参考