CSSで文字や要素を上下左右の中央に配置するには、さまざまな手法があります。その中でも、最も汎用的でわかりやすい方法が「Flexbox（フレックスボックス）」です。
この記事では、フレックスボックスを使って、要素を中央に寄せる方法を実例つきで解説します。
フレックスボックスで中央に配置する方法
フレックスボックスとは？
display: flex;上記を親要素に指定すると、その要素はフレックスコンテナとなり、中の要素（子要素）はフレックスアイテムとして並びます。これにより、子要素の配置を柔軟に制御できます。
中央配置に使う主要プロパティ
| プロパティ名 | 役割 | よく使う値 |
|---|---|---|
| flex-direction | 主軸の方向を指定 | row（横） / column（縦） |
| justify-content | 主軸方向に対する配置 | center（中央） |
| align-items | 交差軸（主軸の直角方向）に対する配置 | center（中央） |
中央に寄せたい場合、特にこの2つをセットで使用します：
justify-content: center;
align-items: center;交差軸方向に中央揃えする：align-items
align-items: center;このプロパティを使うと、縦方向（flex-directionがrowの場合）に中央揃えされます。
See the Pen CSS、文字の高さを中央に配置する1 by sho-ta (@sho-ta) on CodePen.
※指定しない場合は stretch（初期値）となり、高さが自動的に引き伸ばされる点に注意。
See the Pen CSS、文字の高さを中央に配置する11 by sho-ta (@sho-ta) on CodePen.
主軸方向に中央揃えする：justify-content
justify-content: center;このプロパティは、水平方向（flex-directionがrowの場合）に中央寄せします。
See the Pen justify-content、CSS、文字の高さを中央に配置する1 by sho-ta (@sho-ta) on CodePen.
要素を完全に中央に配置する方法（縦横中央）
縦横の中央に配置するには、以下のように両方のプロパティを指定します。
display: flex;
justify-content: center;
align-items: center;See the Pen justify-content、align-items、CSS、文字の高さを中央に配置する1 by sho-ta (@sho-ta) on CodePen.
これにより、子要素は親要素の**中央（上下左右）**に完全に配置されます。
補足
flex-direction: column; を指定すれば、主軸と交差軸の方向が逆になり、縦並びになります。必要に応じて方向を切り替えてください。
transformを使って要素を中央に配置する方法
Flexbox以外にも、transform プロパティを使った中央配置の方法があります。特に、translate() を使ったやり方は、単一要素のレイアウト調整に便利です。
基本の使い方：translateで中央に移動
まず、準備として親要素と子要素のpositionを以下のように設定します。
.parent {
position: relative;
}
.child {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}各プロパティの意味
- position: relative; … 親要素を基準に子要素を配置
- position: absolute; … 子要素を絶対位置で配置可能に
- top: 50%; left: 50%; … 親要素の中央位置に子要素の左上を置く
- transform: translate(-50%, -50%); … 自身の幅・高さの50%分だけ戻すことで「中央揃え」
See the Pen postion、CSS、文字の高さを中央に配置する2 by sho-ta (@sho-ta) on CodePen.
この方法を使えば、縦横中央揃えが実現できます。
注意点：paddingやmarginが影響する場合
下の例では、中央に配置しているつもりでも、実際にはやや下にずれています。
これは、position: absolute; を指定した要素に padding や margin が指定されているため、実際の視覚上の中央とズレてしまうからです。
See the Pen postion、CSS、文字の高さを中央に配置する3 by sho-ta (@sho-ta) on CodePen.
ズレを修正する：calc()を使った調整
このようなズレを補正するために、calc() 関数を使って、中央からマイナス方向に補正することも可能です。
top: calc(50% - 20px);20pxの部分は、実際の要素の高さ・padding・marginなどを考慮して調整します。
See the Pen postion、CSS、文字の高さを中央に配置する1 by sho-ta (@sho-ta) on CodePen.
line-heightとtext-alignで文字を中央に配置する方法
中央配置には Flexbox や transform 以外にも、line-height と text-align を組み合わせるシンプルな方法があります。特にテキストのみを中央に配置したいときに便利です。
使うプロパティの役割
| プロパティ | 概要 |
|---|---|
| line-height | 行ボックスの高さを指定し、垂直方向の位置に影響 |
| text-align | テキストの水平方向の配置を指定 |
インライン要素とブロック要素の違いを理解しよう
同じプロパティを使っても、要素の種類によって挙動が異なります。
以下に <span>（インライン要素）と <p>（ブロック要素）の違いを整理します。
✅ インライン要素（例：<span>）
- 幅（width）・高さ（height）の指定が効きにくい
- 内容のサイズに応じて自動で大きさが決まる
- 横並びが基本
✅ ブロック要素（例：<p>）
- 幅・高さ・マージンなどを自由に指定できる
- 上下に積み重なる（縦並び）
基本のコード
まず、インライン要素とブロック要素の両方に共通スタイルを指定した例です。
span, p {
height: 50px;
text-align: center;
line-height: 50px;
background-color: lightblue;
}
See the Pen ノーマル、line-height、CSS、文字の高さを中央に配置する1 by sho-ta (@sho-ta) on CodePen.
この設定で、p要素内のテキストは縦横ともに中央に配置されます。
ただし、span はインライン要素のため、高さが適用されず視覚的な変化がほとんどありません。
ブロック要素（pタグ）での中央配置
以下のように、親要素と同じ高さをp要素に設定し、その高さをline-heightにも使うことで、縦横中央に配置されます。
.parent {
height: 100px;
}
p {
height: 100px;
line-height: 100px;
text-align: center;
}See the Pen ノーマル、line-height、CSS、文字の高さを中央に配置する1 by sho-ta (@sho-ta) on CodePen.
補足：p要素が親要素を覆い隠す場合
背景色などを指定していると、p要素が親要素の上に重なって見えなくなることがあります。これは見た目の問題であり、中央配置の効果には影響ありません。
↠【ここに CodePen 埋め込み】
See the Pen ノーマル、line-height、CSS、文字の高さを中央に配置する3 by sho-ta (@sho-ta) on CodePen.
注意点
この方法は単一行テキストに対して有効です。複数行テキストには line-height ではなく、FlexboxやGridの使用をおすすめします。
フレックスコンテナーとtext-alignを組み合わせて中央配置する
ここでは、Flexbox（フレックスコンテナー）に加え、line-height や text-align も併用する方法を解説します。
それぞれのプロパティの役割を振り返っておきましょう。
各プロパティの役割まとめ
| プロパティ | 説明 |
|---|---|
| align-items | 交差軸（主軸に直角な方向）の中央揃え |
| justify-content | 主軸方向の中央揃え |
| line-height | テキストの垂直方向の位置調整 |
| text-align | テキストの水平方向の配置 |
フレックスコンテナーを用いた中央配置の実例
Step 1：基本コード（幅未指定）
以下の例では、Flexboxの中央配置を適用していますが、幅（width）が指定されていないため、text-align の効果が出ません。
See the Pen ノーマル、line-height、CSS、文字の高さを中央に配置する3 by sho-ta (@sho-ta) on CodePen.
Step 2：幅を指定して中央揃えを確実に
.child {
width: 200px;
text-align: center;
}これにより text-align: center; の効果が現れ、テキストが水平方向にも中央に表示されます。
See the Pen ノーマル、line-height、CSS、文字の高さを中央に配置する4 by sho-ta (@sho-ta) on CodePen.
複数アイテムを縦方向に中央配置する
flex-direction の初期値は row（横並び）です。これを column に変更することで、アイテムを縦方向に並べて中央に配置することができます。
.container {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}See the Pen 複数、line-height、CSS、文字の高さを中央に配置する4 by sho-ta (@sho-ta) on CodePen.
まとめ：複数の中央配置手法を使い分けよう
CSSで中央に配置する方法は、以下のように多数あります。
- Flexbox：最も柔軟で汎用的、特に複数要素に強い
- transform + translate：要素1つを正確に配置したいときに有効
- line-height + text-align：テキストを中央揃えにしたいときに簡単
📝 効率的な覚え方のコツ
初心者の方は、まずは1〜2パターンを確実に使えるように覚えることが重要です。
その後、レイアウトで詰まった時に別の方法を試しながら学習を進めると、実践的かつ効率よく習得できます。
コメント