【WEB制作】たった2行で要素やテキストを中央寄せする方法【HTML/CSS】

はじめに

WEB制作では画面・ボックスのど真ん中にテキストや子要素を配置するケースは頻繁にあります。

CSSで上下左右の中央寄せを行うにはmarginやpaddingを用いたりpositionで指定したりする方法がありますが、これらはレスポンシブデザインまで考慮するとコードが複雑になりがちですよね。

今回ご紹介する方法では、CSSのグリッドレイアウトを用いてたった2行のコードで要素やテキストを中央寄せできます。
縦横サイズの変更などを気にせず使用できるとても汎用性の高い方法ですので、使いこなせるようになるとコーディングが楽になりますよ。

このノウハウが刺さる人

このノウハウは以下のような対象者を想定して執筆しています。

・HTML/CSSの操作方法が分かる方
　（ProgateのHTML/CSSを一通り終えた程度でOK）
・実用的なコーディングのノウハウを学びたい方
・CSSのグリッドレイアウトの活用方法を学びたい方

続きは、リベシティにログインしてからお読みください

＼初月30日間無料／ リベシティで会員登録をする ログインする

ノウハウ図書館でできること

• すべての記事の閲覧

• ブックマーク

• いいね・レビュー

• 記事の投稿※応援会員（有料）のみ

• ポイントの獲得※応援会員（有料）のみ

※会員登録には、新入生会員（初月30日無料）と応援会員（有料）があります

応援会員制度とは？

さらに！

• リベシティの他の機能やサービスもご利用いただけます（詳しく見る）