スタッフブログ

CSS Gridで要素を上下左右中央揃えにする方法

2023年07月13日（木）

皆さん、こんにちは。
コーディングする際、要素を上下左右に中央揃えにしたい場合がありますよね。
今回はCSS Gridで要素を上下左右中央揃えにする方法について共有したいと思います。

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

まず、display: grid;で対象の要素をグリッドレイアウトに設定し、place-content: center;で要素を中央に配置しています。

gridとplace-contentの動きを詳しく知りたい方はMDNのサイトを参考にしてみてください。

以上、CSS Gridで要素を上下左右中央揃えにする方法についてでした。
皆さんのコーディングがより効率的になることを願っています。

福岡県のウェブ制作会社です。
HTML、CSS、JavaScript、ウェブアクセシビリティ、CMSの利用したウェブ制作など主にフロントエンドを得意としています。

遠慮なくご相談ください。我々はあなたのプロジェクトに最善を尽くし、
あなたのウェブサイトの制作を強力にサポートいたします。