【完全保存版】CSSで中央寄せする方法まとめ｜横・縦・上下中央を初心者向けに徹底解説

CSSを学び始めると、多くの人がつまずくのが
「中央寄せがうまくできない」 という問題です。

テキストを中央にしたい
ボックスを真ん中に配置したい
縦と横を完全に中央寄せしたい

この記事では、「css 中央寄せ」で検索した初心者の方に向けて、
状況別に正しい中央寄せの方法を、基本から実務レベルまで丁寧に解説します。

CSSの中央寄せとは何か

CSSの中央寄せとは、
要素や文字を左右・上下の中央に配置することです。

一言で「中央寄せ」といっても、実は次のように種類があります。

テキストの中央寄せ
ブロック要素の横中央寄せ
縦方向の中央寄せ
縦横の完全中央寄せ

目的によって使うCSSが異なるため、
「何を中央にしたいのか」を意識することが重要です。

テキストを中央寄せする方法

文字を中央寄せしたい場合は、text-align を使います。

p {
  text-align: center;
}

ポイント

インライン要素（文字）に有効
最も基本的な中央寄せ

見出しや文章の中央寄せは、この方法で対応できます。

ブロック要素を横方向に中央寄せする方法

ボックスや画像など、ブロック要素を中央に配置したい場合は
margin: 0 auto; を使います。

.box {
  width: 300px;
  margin: 0 auto;
}

注意点

widthの指定が必須
横方向のみ中央寄せされる

レイアウトの基本として非常によく使われます。

Flexboxで中央寄せする方法（最もおすすめ）

現在のCSSでは、Flexboxを使った中央寄せが主流です。

横方向だけ中央寄せ（Flexbox）

.container {
  display: flex;
  justify-content: center;
}

縦方向だけ中央寄せ（Flexbox）

.container {
  display: flex;
  align-items: center;
}

縦横を完全に中央寄せする方法（Flexbox）

.container {
  display: flex;
  justify-content: center;
  align-items: center;
}

Flexbox中央寄せの特徴

シンプルで分かりやすい
レスポンシブ対応しやすい
現代的な書き方

初心者の方は、まずFlexboxを覚えるのがおすすめです。

positionを使った中央寄せ（応用）

positionを使うことで、
画面の中央に要素を固定することもできます。

.box {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

使われる場面

モーダルウィンドウ
ローディング画面
ポップアップ表示

少し難しいですが、実務ではよく使われます。

中央寄せがうまくいかない原因

text-alignでボックスを中央にしようとしている

.box {
  text-align: center;
}

これは中の文字しか中央になりません。
ボックス自体の中央寄せには使えません。

widthが指定されていない

.box {
  margin: 0 auto;
}

widthがないと、横幅100%のままになり、
中央寄せの効果が分かりません。

中央寄せの正しい使い分けまとめ

目的	方法
文字を中央に	text-align
横中央	margin: 0 auto
縦横中央	Flexbox
画面中央固定	position + transform

中央寄せは目的別に方法を選ぶことが大切です。

CSS中央寄せを学ぶメリット

CSSの中央寄せを理解すると、

レイアウトが整う
デザインが一気に洗練される
レスポンシブ対応が簡単になる
実務レベルの制作に近づく

といったメリットがあります。

よくある質問

中央寄せはどの方法を覚えればいいですか

初心者の方は、
Flexboxによる中央寄せを最優先で覚えるのがおすすめです。

古いmargin指定は使わない方がいいですか

今でも問題なく使えます。
目的に応じて使い分けましょう。

まとめ

CSSで中央寄せする方法は、1つではありません。

テキストは text-align
横中央は margin: 0 auto
縦横中央は Flexbox
特殊用途は position

「css 中央寄せ」で検索した方は、
まず Flexboxを使った中央寄せ を理解することから始めてみてください。
正しく使い分けられるようになると、
CSSレイアウトの理解が一段階レベルアップします。

【完全保存版】CSSで中央寄せする方法まとめ｜横・縦・上下中央を初心者向けに徹底解説