HTMLで中央寄せを実現する方法｜CSSでテキスト・画像・要素を整える基礎

プログラミング

公開日: 2026/01/26

※この記事にはプロモーションを含みます

はじめに

Web 制作において、 中央寄せ（センタリング） は基本中の基本です。

しかし、「text-align を指定しても中央にならない」「margin: auto; が効かない」など、初心者がつまずきやすいポイントでもあります。

本記事では、 HTML と CSS で要素を中央に配置する方法 を、 テキスト・画像・ブロック要素（div など） ごとに整理して解説します。
さらに、中央寄せが崩れる原因やレスポンシブ対応時の注意点についても詳しく紹介します。

中央寄せの仕組みを理解すれば、見た目の整った Web ページを効率的に作れるようになります。

中央寄せとは？基本の考え方を理解しよう

中央寄せの目的とデザイン上の効果

中央寄せとは、要素（文字や画像、ブロックなど）を 画面や親要素の中心に配置すること を指します。

デザイン的には、視線を集めたり、強調したいコンテンツを際立たせる効果があります。

特に、以下のような場面でよく使われます。

よく使われる場面

中央寄せは、 情報の整理とユーザーの視線誘導 の基本といえる配置手法です。

要素の種類によって方法が変わる

中央寄せの指定方法は、要素の性質（ インライン要素かブロック要素か ）によって異なります。

たとえば,

テキスト（インライン要素）は text-align で配置を指定
div タグ（ブロック要素）は flex や grid で制御
画像は display:block; と margin:auto; を組み合わせる

このように、中央寄せは 「要素の種類 × 配置方法」 で使い分けることが重要です。

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

text-align の基本的な使い方

テキストを中央に配置する最も基本的な方法は、CSS の text-align プロパティを使うことです。

<p>Hello World</p>

p {
  text-align: center;
}

テキスト中央揃え比較

この指定を行うと、段落内のテキストが親要素の幅の中央に配置されます。

見出しタグ（<h1>～<h6>）や段落（<p>）などの、 インライン要素 やインラインブロック要素に有効です。

また、 text-align は子要素ではなく親要素に指定する 必要があります。

よくある間違い

初心者がよくあるミスとして、ブロック要素に対して text-align を使うことがあります。

しかし、text-align は「テキストやインライン要素の整列」を行うプロパティであり、ブロック全体を動かすプロパティではありません。

間違った例

<div>Hello World</div>

div {
  text-align: center;
}

上記の指定だと、div 内のテキストは中央寄せされますが、div 自体は中央には移動しません。

画像を中央寄せする方法

画像を中央に配置したい場合は、以下の方法が有効です。

1.display:block; を使ってブロック要素に変更する
2.margin: 0 auto; を指定して中央寄せにする

img {
  display: block;
  margin: 0 auto;
}

画像中央揃え比較

display: block; を指定すると、画像がブロック要素として扱われるようになり、横幅いっぱいを持つ“ひとつの行の箱”になります。

そのうえで margin: 0 auto;を設定すると、左右のマージン（= 要素の外側の余白）が自動的に均等に取られ、結果的に画像が親要素の中央に配置されます。

ブロック要素(div など)を中央寄せにする方法

flex と grid を使った中央配置の実装

最近の Web レイアウトでは、 flex や grid を使った中央寄せが主流です。これらは 親要素に対しての配置指定 が可能で、レスポンシブにも対応しやすいのが特徴です。

flex を使う例

<div class="”container”"></div>

.container {
  display: flex;
  justify-content: center; /* 水平方向中央 */
  align-items: center; /* 垂直方向中央 */
  width: 40px;
  aspect-ratio: 1;
  background-color: gray;
}

grid を使う例

<div class="”container”"></div>

.container {
  display: grid;
  place-items: center; /* 水平＆垂直方向中央 */
  width: 40px;
  aspect-ratio: 1;
  background-color: gray;
}

flex&grid

ポイントまとめ

flex ：複数要素を柔軟に並べたいときに最適
grid ：縦横のレイアウト全体を管理したい場合に便利

よくあるエラーと対処法

中央にならない原因とその解決策

中央寄せを指定しているのにうまく反映されない場合、CSS や HTML の基本設定に原因があることがほとんど です。

特に、以下のような点を確認してみましょう。

中央寄せが崩れる主な原因

これらの原因を踏まえて、中央寄せを正しく機能させるためのポイントを確認してみましょう。

親要素に幅（width）が指定されていない

→ 親要素には明確な幅を指定する

display の指定が適切でない（インライン要素のままなど）

→ 要素の種類に応じた中央寄せ方法を選ぶ

position や float が競合している

→ 不要な position や float の指定を削除する

これらを見直すだけで、崩れやズレの多くは解消できます。

レスポンシブ対応で崩れる場合のチェックポイント

スマートフォンやタブレット表示で中央寄せが崩れる場合、以下を確認してください。

中央寄せしたい要素の幅、余白、フォントサイズに % や vw などの相対指定を使っているか
メディアクエリで 幅指定 を変えていないか
flex や grid の align 設定が正しく適用されているか

中央寄せを保つには、 画面の幅が変わっても自動的に整う“伸び縮みするレイアウト（レスポンシブ）” にしておくことが大切です。

まとめ

中央寄せの基本まとめ

中央寄せは、Web デザインの印象を左右する重要なテクニックです。
要素の種類に応じて、上記のように使い分けるのがポイントです。

また、単なる見た目調整だけでなく、レイアウト全体の設計を意識して配置することが、崩れない Web デザインのコツです。

こうした CSS レイアウトやプログラミングを基礎から学びたい方は、WEBMASTERS がおすすめです。
基礎から着実に学ぶことができるので、今回のような細かなスタイル調整もスムーズにできるようになります。

この記事を
シェアする！