HTML・CSSで文字や画像を真ん中に寄せる方法｜中央揃えを初心者向けに解説

HTMLで文字や画像を真ん中に置きたいのに、CSSを追加しても中央へ移動しないことがありますよね。中央揃えの方法は、中央にしたいものが「文字」「画像」「幅のあるボックス」のどれか、横方向だけか縦横両方かによって変わります。

横方向だけなら、文字にはtext-align: center;、幅のある画像やボックスにはmargin-inline: auto;を使うのが基本です。縦横の中央へ配置したい場合は、親要素へFlexboxまたはCSS Gridを指定します。

この記事では、HTML・CSSを学び始めた方に向けて、中央揃えの5パターンを実際の表示画像とコードで解説します。うまくいかない原因も確認するので、作りたいレイアウトに合う方法を選べるようになります。

HTML・CSSで真ん中に寄せる方法を選ぶ

最初に、中央へ配置したい要素と目的を整理しましょう。次の表から当てはまる方法を選ぶと、遠回りせずに設定できます。

ここでいう「親要素」とは、中央にしたい要素を直接囲んでいる要素です。CSSの中央揃えは、基本的に親要素の内側にある空間を基準に計算されます。

文字をtext-alignで中央揃えにする

見出しや文章などの文字を中央に揃えるときは、文字を囲む親要素へtext-align: center;を指定します。次の例では、お知らせ部分の見出しと文章が中央に揃っています。

index.htmlのbodyタグ内へ、中央揃えにしたい文字を含むHTMLを記述します。今回はsection要素にnoticeというクラス名を付けます。

<section class="notice">
  <h2>お知らせ</h2>
  <p>この文章は親要素の幅の中央に揃っています。</p>
</section>

続いて、style.cssの末尾へ次のCSSを追加してください。text-alignは文字そのものではなく、文字を含む行を親要素のどこへ揃えるかを指定するプロパティです。

.notice {
  padding: 40px 24px;
  text-align: center;
  background-color: #eef5ff;
  border-radius: 16px;
}

text-align: center;は、見出しや段落の文字のほか、リンクやボタンのようなインライン要素も中央へ揃えられます。ただし、親要素そのものの箱を中央へ移動する指定ではありません。

画像を横方向の中央に配置する

画像を確実に中央へ配置したい場合は、img要素をブロック要素として扱い、左右の余白を自動計算させます。次の表示では、画像の左右に同じ余白ができています。

index.htmlのbodyタグ内へ画像を置きます。srcは画像ファイルの場所、altは画像の内容を伝える代替テキストです。

<img
  class="center-image"
  src="images/sample-center-image.png"
  alt="青い山と黄色い太陽のイラスト"
>

次のCSSをstyle.cssへ追加します。display: block;で画像をブロック要素にし、margin-inline: auto;で左右の余白を均等にします。

.center-image {
  display: block;
  width: min(100%, 520px);
  height: auto;
  margin-inline: auto;
}

• width: min(100%, 520px);：画面が広いときは520px、狭いときは親要素の幅までに収めます。
• height: auto;：画像の縦横比を保ちます。
• margin-inline：横書きでは左右の余白をまとめて指定できます。

画像は初期状態ではインライン要素として扱われます。その場合は親要素へtext-align: center;を指定しても中央にできますが、画像自身へmargin-inline: auto;を使うならdisplay: block;も忘れずに指定しましょう。

ボックスをmarginで中央に配置する

カードや記事本文など、幅を持つボックスを横方向の中央へ配置するときもmargin-inline: auto;を使います。次のカードは最大幅を560pxに制限し、親要素の中央に置いています。

index.htmlへカードのHTMLを追加します。article要素全体が中央へ移動する対象です。

<article class="profile-card">
  <h2>プロフィール</h2>
  <p>HTMLとCSSを学習しています。</p>
</article>

style.cssへ次のCSSを追加してください。max-widthで親要素より小さくなる余地を作ることがポイントです。

.profile-card {
  width: min(100%, 560px);
  margin-inline: auto;
  padding: 32px;
  background-color: #ffffff;
  border: 2px solid #cfe0ff;
  border-radius: 16px;
  box-sizing: border-box;
}

ボックスの幅が親要素と同じ100%なら、左右に分ける余白がないため見た目は変わりません。widthやmax-widthで親より小さい幅にすると、自動余白による中央配置を確認できます。

Flexboxで複数要素を縦横中央にする

ボタンのまとまりなど、複数の要素を横に並べながら縦横中央へ置く場合はFlexboxが便利です。親要素へdisplay: flex;を指定し、主軸と交差軸の位置を整えます。

index.htmlには、親となるdiv要素と、その中へ中央に置きたい2つのリンクを記述します。

<div class="action-area">
  <a class="button" href="#start">はじめる</a>
  <a class="button button-outline" href="#detail">詳しく見る</a>
</div>

style.cssへ次のCSSを追加します。横並びが主軸なので、justify-contentが横方向、align-itemsが縦方向の中央揃えを担当します。

.action-area {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  min-height: 320px;
  padding: 24px;
  background-color: #eef5ff;
}

.button {
  display: inline-block;
  padding: 14px 24px;
  color: #ffffff;
  text-decoration: none;
  background-color: #2563eb;
  border: 2px solid #2563eb;
  border-radius: 12px;
}

.button-outline {
  color: #1d4ed8;
  background-color: #ffffff;
}

縦方向の中央揃えを目で確認するには、親要素に高さが必要です。この例ではmin-height: 320px;を指定しています。高さの指定がなく内容と同じ高さしかない場合、上下に移動できる空間がありません。

画面が狭いときにボタンが窮屈になる場合は、flex-wrap: wrap;を.action-areaへ追加してください。ボタンが必要に応じて折り返され、横方向のはみ出しを防げます。

CSS Gridで1つの要素を縦横中央にする

親要素の中央にメッセージやローディング表示を1つ置くなら、CSS Gridのplace-items: center;を使うと簡潔です。これは横方向と縦方向の中央揃えを1行で指定できます。

index.htmlへ、表示領域とその中のメッセージを記述します。

<div class="message-area">
  <div class="message-card">
    <h2>送信しました</h2>
    <p>メッセージが画面の中央に表示されています。</p>
  </div>
</div>

style.cssへ次のCSSを追加してください。place-items: center;は、Gridの各マス内で子要素を縦横中央へ揃えます。

.message-area {
  display: grid;
  place-items: center;
  min-height: 340px;
  padding: 24px;
  background-color: #eaf2ff;
}

.message-card {
  width: min(100%, 480px);
  padding: 32px;
  text-align: center;
  background-color: #ffffff;
  border-radius: 16px;
  box-sizing: border-box;
}

FlexboxとGridのどちらでも縦横中央にできます。複数要素を一方向に並べたい場合はFlexbox、1つの要素を領域の中央へ置く場合はGrid、と考えると初心者の方でも選びやすくなります。

真ん中に寄らないときの原因と対処方法

text-alignを画像自身に指定している

text-alignは、指定した要素の中にある文字やインライン要素を揃えます。画像へ直接指定するのではなく、画像を囲む親要素へ指定してください。

/* 画像を囲む親要素へ指定する */
.image-wrapper {
  text-align: center;
}

marginをautoにしても変化しない

対象の幅が親要素いっぱいなら、左右へ配分する余白がありません。widthまたはmax-widthを指定し、画像のようなインライン要素にはdisplay: block;も追加します。

縦方向の中央揃えが分からない

まず、親要素に子要素より高い領域があるか確認します。そのうえでFlexboxならalign-items: center;、Gridならplace-items: center;を親要素へ指定してください。

中央の基準が想定と違う

中央揃えは画面全体ではなく、通常は親要素の内側が基準です。親要素の幅、余白、paddingを開発者ツールで確認すると、左右がずれて見える原因を見つけやすくなります。

centerタグやalign属性は使わない

古いコードでは<center>タグやalign="center"属性を見かけることがあります。しかし、現在のHTMLでは見た目の配置をCSSで指定するのが基本です。

HTMLは見出し・文章・画像などの意味と構造を担当し、CSSは配置や色などの見た目を担当します。役割を分けると、スマートフォン対応やデザイン変更もしやすくなります。

HTML・CSSの真ん中寄せまとめ

文字は親要素のtext-align: center;、画像や幅のあるボックスはmargin-inline: auto;で横方向の中央へ配置できます。縦横の中央揃えには、親要素へFlexboxまたはCSS Gridを指定しましょう。

中央に寄らないときは、対象が文字か箱か、CSSを親と子のどちらへ指定するか、中央へ移動できる余白や高さがあるかを順に確認してください。この3点を整理すれば、目的に合う方法を落ち着いて選べます。