1行の中で要素を「左・中央・右」に振り分けるなら、親要素をFlexboxにしてjustify-content: space-betweenを指定するのが最も簡単で確実です。これだけで左端・中央・右端の3要素がきれいに分かれて並びます。

この記事の要点
1行内で左・中央・右へ要素を寄せる主な方法は「Flexbox」「margin auto」「Grid」の3つ。 3要素を均等に振り分けるなら display: flex ＋ justify-content: space-between が定番。 個別に押し出すだけなら margin-left: auto（右寄せ）や margin: 0 auto（中央寄せ）が使える。 列幅をきっちり制御したい場合は Grid の grid-template-columns が向く。 古い float を使った旧手法は回り込み解除が面倒で、現在は非推奨。

 

主な実現方法

「左・中央・右」に要素を配置するというのは、ナビゲーションバーやヘッダー、フッターなどで非常によくあるレイアウトです。たとえば「ロゴを左、メニューを中央、ログインボタンを右」といった構成です。これを1行（横並び）で実現する代表的な方法は次の3つです。

• 方法①：Flexbox（justify-content: space-between） — 親をフレックスコンテナにして子要素を両端＋中央に分配する。最も手軽。
• 方法②：margin auto — 特定の要素だけを margin-left: auto で右へ、margin: 0 auto で中央へ押し出す。
• 方法③：Grid（grid-template-columns） — 行を3カラムに分割し、それぞれのセルの中で左・中央・右に整列させる。列幅を厳密に決めたい場合に有効。

以下、それぞれの考え方とコード例を見ていきます。

 

方法①：Flexbox（justify-content: space-between）

親要素に display: flex を指定すると、子要素は自動的に横一列に並びます。そこへ justify-content: space-between を加えると、最初の要素は左端、最後の要素は右端に貼り付き、残りの要素（中央）は均等な余白を挟んで真ん中に配置されます。3要素であれば、これだけで左・中央・右が完成します。

<!-- HTML --> <div class="flex-row">   <span>Left</span>   <span>Center</span>   <span>Right</span> </div>   /* CSS */ .flex-row {   display: flex;   justify-content: space-between;   align-items: center; }

左と右だけを両端に寄せたい（中央が不要）場合も space-between がそのまま使えます。中央要素の幅や位置を画面の中心にきっちり合わせたいときは、左右の要素の幅が異なると中央がわずかにずれる点に注意が必要です。その場合は後述の Grid を使うと中央を画面の正確な中心に固定できます。

 

方法②：margin auto で個別に押し出す

すべての要素を一括で分配するのではなく、特定の要素だけを寄せたい場合は margin の auto が便利です。Flexbox や inline-block の横並びの中で、ある要素に margin-left: auto を付けると、その要素は使える余白をすべて左側に吸収して右端へ押し出されます。また、ブロック要素を margin: 0 auto にすると左右の余白が均等になり、中央寄せになります。

/* Flexbox 内で右の要素だけを右端へ */ .flex-row {   display: flex;   align-items: center; } .flex-row .right {   margin-left: auto; /* 余白を左に寄せて右端へ */ }   /* ブロック要素を中央寄せ */ .center-box {   width: 200px;   margin: 0 auto; /* 左右の余白を均等にして中央へ */ }

なお、margin: 0 auto による中央寄せは、対象要素に 幅（width）が指定されているブロック要素であることが前提です。幅指定のない要素や、横並びになっていない inline 要素には効きません。テキストそのものを中央寄せしたい場合は text-align: center を使います。

 

方法③：Grid（grid-template-columns）

列の幅をきっちり決めたい、あるいは中央要素を画面の正確な中心に固定したい場合は CSS Grid が向いています。親に display: grid と grid-template-columns: 1fr auto 1fr を指定すると、左右の列が同じ幅（1fr ずつ）になるため、中央の列は常に画面中央に来ます。各セルの中で text-align や justify-self を使えば、セル内の寄せ方も細かく制御できます。

.grid-row {   display: grid;   grid-template-columns: 1fr auto 1fr;   align-items: center; } .grid-row .left  { text-align: left; } .grid-row .center { text-align: center; } .grid-row .right  { text-align: right; }

左右の列を 1fr ずつにそろえているため、中央要素は左右の要素の幅に左右されず、常に行の中心に表示されます。これが justify-content: space-between との大きな違いです。

 

参考：table 表示を使った従来の書き方

Flexbox や Grid が普及する前は、親を display: table、子を display: table-cell にして、各セルで text-align を変える方法もよく使われました。下のコードがその例で、出力結果は次の画像のようになります。考え方の参考として残しておきますが、現在の新規実装では Flexbox か Grid を選ぶのがおすすめです。

/* CSS */ .main   { display: table; width: 100%; } .left   { display: table-cell; text-align: left; } .center { display: table-cell; text-align: center; } .right  { display: table-cell; text-align: right; }

 

方法の比較表

方法	対応ブラウザ	柔軟性	主な用途
① Flexbox（space-between）	モダンブラウザで広く対応（推奨）	高い	ヘッダー・ナビなど一般的な左中右レイアウト全般
② margin auto	幅広く対応	中	特定の1要素だけを右や中央へ寄せたいとき
③ Grid	モダンブラウザで対応	高い	列幅を固定したい／中央を画面の正確な中心に置きたいとき
（参考）display: table	非常に幅広く対応	低い	従来手法。新規実装では非推奨

 

落とし穴・注意点

注意点	内容
float の旧手法は非推奨	float で左右に寄せる方法は回り込み解除（clearfix）が必要で扱いづらく、中央寄せも難しい。現在は Flexbox / Grid に置き換えるのが基本。
中央が微妙にずれる	space-between は左右要素の幅が違うと中央がわずかにずれる。画面の中心に正確に固定したいなら Grid（1fr auto 1fr）を使う。
margin auto が効かない	margin: 0 auto による中央寄せは、幅指定のあるブロック要素が前提。inline 要素や幅未指定の要素には効かない。
要素数が増えたとき	3要素なら space-between で足りるが、要素が増えると意図しない配置になりやすい。グループごとに <div> でまとめるか、Grid のカラム設計で対応する。

 

よくある質問（FAQ）

Q1. 左と右だけを両端に寄せて、中央には何も置きたくありません。どうすればいいですか？
A. 子要素が2つだけの状態で親に display: flex; justify-content: space-between; を指定すれば、左の要素が左端、右の要素が右端に配置されます。あるいは右の要素にだけ margin-left: auto を付けても同じ結果になります。

Q2. 中央の要素を画面のちょうど真ん中に固定したいのですが、Flexbox だと少しずれます。
A. space-between は左右要素の幅の影響を受けるため中央がずれることがあります。中央を厳密に画面の中心へ置きたい場合は、Grid で grid-template-columns: 1fr auto 1fr を使ってください。左右の列幅が常に等しくなるため、中央が正確な中心に来ます。

Q3. 縦方向（高さ方向）の中央もそろえたいです。
A. Flexbox なら align-items: center、Grid でも align-items: center を親に追加すれば、各要素が行の縦中央にそろいます。横（左中右）と縦（上下中央）を同時に制御できるのが、これらのレイアウト手法の利点です。