CSSで中央寄せ・右寄せを簡単に！初心者向け完全ガイド

2025年1月15日

HTML/CSS

目次 [ close ]

はじめに

ウェブページのレイアウトを整える際、要素を「中央寄せ」や「右寄せ」に配置することはとても重要です。
これらの配置は、単にデザインを美しくするだけでなく、ユーザーの視線を意識的に誘導する効果もあります。

たとえば、ボタンを画面中央に配置することで注目を集めたり、右寄せのテキストで特定の情報を目立たせたりすることができます。
しかし、初心者にとっては「どうやって寄せるのか」が少し難しく感じられることもあるでしょう。

本記事では、CSSを使って「中央寄せ」や「右寄せ」を簡単に実現する方法を、初心者にも分かりやすく解説します。
基本的なtext-alignプロパティから、フレックスボックスやグリッドレイアウトといったモダンな手法まで幅広く紹介しますので、ぜひ最後までご覧ください！

ゆうや

「フレックスボックスって難しそう…」「中央寄せがうまくいかない！」そんな悩みをこの記事でスッキリ解決します！

テキストの中央寄せ・右寄せ

`text-align`

CSSでテキストを中央寄せや右寄せにする場合、最も基本的で簡単な方法はtext-alignプロパティを使う方法です。
このプロパティは、親要素に適用するだけで子要素のテキスト位置を簡単に制御できます。

text-alignプロパティは、テキストの配置方法を指定するプロパティです。

See the Pen text-align by yuya o (@yuya-o) on CodePen.

text-align – CSS: カスケーディングスタイルシート | MDN

MDN Web Docs

ボックス（要素）の中央寄せ・右寄せ

ボックス要素（例えばdivや画像など）を中央寄せする方法は、テキストの中央寄せより少し高度です。
ただし、CSSの基本プロパティやレイアウトツールを使えば簡単に実現できます。

`"margin`“を使った中央寄せ・右寄せ

marginプロパティは、要素の配置を調整するための基本的かつ便利な方法です。
特に、中央寄せや右寄せを行う際に、margin: auto;やmargin-left: auto;を使用することで、手軽に整ったレイアウトを実現できます。

中央寄せ

要素の幅を指定し、左右のmarginを自動（auto）に設定すると、ボックス要素を水平に中央寄せできます。
この方法は、ブロックレベルの要素に有効です。

See the Pen Untitled by yuya o (@yuya-o) on CodePen.

右寄せ

この方法は、要素の幅を指定し、margin-leftを自動（auto）に設定することで実現できます。
特に、単一の要素を簡単に右寄せしたい場合に便利です。

See the Pen box-right-1 by yuya o (@yuya-o) on CodePen.

margin – CSS: カスケーディングスタイルシート | MDN

MDN Web Docs

“フレックスボックス”を使った中央寄せ・右寄せ

フレックスボックスは、CSSで要素の配置を柔軟に制御するための強力なツールです。
特に、中央寄せや右寄せといった配置の調整を直感的に行えるため、シンプルなレイアウトから複雑なレイアウトまで幅広く活用されています。

中央寄せ

フレックスボックスを使うと、要素を親コンテナの中央に簡単に配置できます。
水平方向と垂直方向の中央寄せを両方行う場合、justify-contentとalign-itemsを組み合わせて使用します。
さらに、親要素にdisplay: flex;を設定するだけで、配置が大幅に簡略化されます。

See the Pen box-center-02 by yuya o (@yuya-o) on CodePen.