CSSで簡単に中央揃え！インライン・ブロック要素の使い分けと例文
投稿日：2024.12.25.
更新日：2025.04.12.
デザイン歴 20 年超、500 サイト以上を監修。ブランド戦略をビジュアルへ昇華し、使いやすさと美しさを両立させる UI/UX が持ち味。
3DCG 専門学校卒業後、広告代理店で Web デザイナーとしてキャリアを開始。旅館予約システムや商店街プロモーションなど多業種案件で「伝わるデザイン」の基礎を固めました。
その後、制作部門のリーダーとして 5 年間にわたりチームマネジメントを経験。企画立案から撮影ディレクション、公開後の AB テストまで、クリエイティブとマーケティングの橋渡し役を担ってきました。
2013 年に TREVO を共同設立。現在はデザイン、UI ガイドライン策定やアクセシビリティ監修を担当。
最近の取り組み：AI 生成画像と手描きイラストを組み合わせたブランドビジュアル開発とプロトタイプ検証。
信条：私たちが目指すのは、ホームページ制作を通じてお客様がハッピーになること。そして、そのホームページを訪れるユーザーが心地よく、笑顔になれるような体験を提供し、世の中にポジティブな影響を少しずつ増やしていくことです。
ウェブ制作では、要素を中央寄せすることが頻繁に求められます。インライン要素やブロック要素を効率的に中央揃えするには、CSSを正しく活用することが重要です。この記事では、左右中央、上下中央、上下左右の中央寄せ を実現する方法を具体例を交えて解説します。
インライン要素の左右中央揃え
テキストや画像などのインライン要素を左右中央に揃えるには、親要素に text-align: center; を指定します。
コード例
HTML
<div class="sample1">
sample text
</div>CSS
.sample1 {
text-align: center;
}結果
ポイント: text-align: center; はインライン要素専用です。
ブロック要素の左右中央揃え
ブロック要素を中央揃えするには、margin: 0 auto; を使用します。幅（width）を指定する必要がある点に注意してください。
コード例
HTML
<div class="box1">
<div class="sample2"></div>
</div>CSS
.sample2 {
width: 60px;
height: 60px;
background: #006237;
margin: 0 auto;
}結果
ポイント: margin: 0 auto; を指定するには width を設定する必要があります。
インライン要素の上下中央揃え
インライン要素を上下中央に揃える場合、display: flex; と align-items: center; を使用します。
コード例
HTML
<div class="sample3">
sample text
</div>CSS
.sample3 {
height: 100px;
display: flex;
align-items: center;
background: #e5e5e5;
}結果
ポイント: Flexboxを使うと、親要素内でインライン要素を上下中央に配置できます。
ブロック要素の上下中央揃え
ブロック要素を上下中央に揃える場合も、display: flex; と align-items: center; を使用します。
コード例
HTML
<div class="sample5">
<div class="box2"></div>
</div>CSS
.sample5 {
width: 100%;
height: 100px;
background: #DDFFF0;
display: flex;
align-items: center;
}
.box2 {
width: 60px;
height: 60px;
background: #006237;
}結果
ポイント: 子要素のサイズ指定に注意してください。
ブロック要素の上下左右の中央揃え
上下左右の中央揃えを実現するには、Flexboxで align-items: center; と justify-content: center; を組み合わせます。
コード例
HTML
<div class="box3">
sample text
</div>CSS
.sample6{
width: 100%;
height: 100px;
background: #e5e5e5;
display: flex;
align-items: center;
justify-content: center;
}
.box3{
width: 60px;
height: 60px;
background: #e74c3c;
}結果
ポイント: Flexboxは、複数方向の中央揃えが簡単にできます。
まとめ
中央寄せはウェブ制作で頻繁に必要となる基本テクニックです。
- インライン要素:
text-align: center;を使用。 - ブロック要素（左右中央）:
margin: 0 auto;を活用。 - Flexboxで上下左右中央:
align-items: center;とjustify-content: center;を組み合わせる。
これらの方法を状況に応じて使い分けることで、柔軟なデザインが可能になります。ぜひ試してみてください！
