皆さん、こんにちは。
コーディングする際、要素を上下左右に中央揃えにしたい場合がありますよね。
今回はCSS Gridで要素を上下左右中央揃えにする方法について共有したいと思います。
コード
.center {
display: grid;
place-content: center;
}解説
まず、display: grid;で対象の要素をグリッドレイアウトに設定し、place-content: center;で要素を中央に配置しています。
gridとplace-contentの動きを詳しく知りたい方はMDNのサイトを参考にしてみてください。
grid - CSS: カスケーディングスタイルシート | MDN
mozilla
grid は CSS のプロパティで、一括指定プロパティとして明示的・暗黙的なすべてのグリッドプロパティを単一の宣言で設定します。
place-content - CSS: カスケーディングスタイルシート | MDN
mozilla
place-content は CSS の一括指定プロパティで、ブロック方向とインライン方向の内容物の配置 (すなわち align-content および justify-content) を、グリッドやフレックスボックスなどのレ...
以上、CSS Gridで要素を上下左右中央揃えにする方法についてでした。
皆さんのコーディングがより効率的になることを願っています。
関連するタグ
この記事を書いた人
ましじめ編集部
福岡県のウェブ制作会社です。
HTML、CSS、JavaScript、ウェブアクセシビリティ、CMSの利用したウェブ制作など主にフロントエンドを得意としています。
