要素（バナー）を上下左右中央寄せする方法｜HTMLインラインスタイルとCSS記述方法の違い

ウェブページをデザインする際、画像やバナーなどの要素を中央に配置することは見た目のバランスを整える重要なポイントです。適切な方法を選ぶことでより整ったレイアウトを実現できます。

例えば、デフォルトではバナーが左寄せになっている場合でもCSSを使えば簡単に中央寄せに変更できます。

デフォルト：左寄せ

カスタマイズ後：中央寄せ

この例ではCSSで中央寄せを指定しています。

この記事では、以下のポイントを詳しく解説します。

バナーを中央に配置する方法を知りたい方は、ぜひ参考にしてください！

HTMLインラインスタイルとCSS｜記述方法の違い

記述方法は２種類あり、以下の特徴があります。

項目	HTML内	＼推奨／
		CSSファイル
適用方法	HTMLの style 属性	CSSファイルを使う
手軽さ	すぐに試せる	スタイルシートへの記述が必要
メンテナンス性	低い（都度修正）	高い（共通管理できる）
可読性	低い	高い
再利用性	低い（ページごとに記述）	高い（複数ページに適用可能）

HTMLインラインスタイルの特徴

HTMLの style 属性を直接使う方法です。CSSファイルを作成せずにHTMLだけでデザインを調整できます。

• すぐに適用できるため、簡単に試すことができる

• HTMLの可読性が下がる
• メンテナンス性が低い（スタイル変更時にすべてのHTMLを修正する必要あり）

CSSファイル（外部スタイル）の特徴

HTMLの class や id を使い、CSSファイルでスタイルを定義する方法です。

• コードが整理され、可読性が向上
• 複数のページや要素に対して一括適用できるため、管理がしやすい
• 外部CSSファイルを用いることで、サイト全体のデザイン変更が容易になる

使い分けのポイント

• すぐ試したいとき・簡単なデザイン → HTML内（インラインCSS）
• 複数ページで統一したデザイン管理をするなら → CSSファイル

一見、「HTMLだけで指定できる方が楽じゃない？」と思われがちですが、長期的なメンテナンスのしやすさを考えると、CSSファイルで記述するのが推奨されます。

要素を【左右】中央寄せにする方法

バナーを左右中央寄せにする方法を紹介します。どの方法を用いても左右中央寄せになります。

インライン要素｜text-align: center を使用する

ブロック要素内のインライン要素を中央揃えにする場合、親要素に text-align: center; を適用すると効果的です。この方法はもっともシンプルで特に画像バナーなどを手軽に中央配置したい場合に適しています。

インライン要素とはHTMLの要素のうち文字（行）の一部として扱われる要素 のこと。代表的なものとして、<span>, <a>, <strong>, <img> などがあります。

バナー画像は img 要素で表されることが多いため、インライン要素または inline-block として扱われます。

HTML内に記述（インラインスタイル）

<div style="text-align: center;">
    <img src="banner.jpg" alt="バナー">
</div>

CSSに記述

<div class="center-text">
    <img src="banner.jpg" alt="バナー">
</div>

.center-text {
    text-align: center;
}

ブロック要素｜margin: auto を使用する

ブロック要素を中央揃えにする場合、CSSの margin: auto; を適用することで中央揃えになります。この方法のポイントはブロック要素に適用できることです。

HTML内に記述（インラインスタイル）

<img src="banner.jpg" alt="バナー" style="display: block; margin: auto;">

CSSに記述

<img src="banner.jpg" alt="バナー" class="center-block">

.center-block {
    display: block;
    margin: auto;
}

Flexboxを使用する

親要素に display: flex; を指定し、 justify-content: center; を適用することで子要素を水平方向に中央寄せできます。

HTML内に記述（インラインスタイル）

<div style="display: flex; justify-content: center;">
    <img src="banner.jpg" alt="バナー">
</div>

CSSに記述

<div class="flex-center">
    <img src="banner.jpg" alt="バナー">
</div>

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

Grid を使用する

親要素に display: grid; を指定し、 justify-content: center; を適用することで子要素を水平方向に中央寄せできます。

HTML内に記述（インラインスタイル）

<div style="display: grid; justify-content: center;">
    <img src="banner.jpg" alt="バナー">
</div>

CSSに記述

<div class="grid-center">
    <img src="banner.jpg" alt="バナー">
</div>

.grid-center {
    display: grid;
    justify-content: center;
}

positionを使用する

要素を水平方向に中央寄せしたい場合、 position: absolute; と transform: translateX(-50%); を使用することも可能です。。

HTML内に記述（インラインスタイル）

<div style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);">
    <img src="banner.jpg" alt="バナー">
</div>

CSSに記述

<div class="transform-center">
    <img src="banner.jpg" alt="バナー">
</div>

.transform-center {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

要素を【上下左右】中央に配置する方法

左右中央寄せのほかに、画面の上下左右中央に配置するケースは多くあります。この場合は高さを指定することで上下中央に配置可能です。

Gridを使用する

上下左右中央に配置するには、CSSのGrid を利用する方法が非常にシンプルで直感的です。

place-items はアイテム自体の中央配置をおこない、place-content はアイテムが中央に配置された際の全体の配置をコントロールする役割があります。

.container {
  display: grid;
  place-content: center;/* 上下左右中央配置 */
  height: 100vh; /* ビューポートの高さを指定 */
}

Flexboxを使用する

一般的なのは flexbox を使用する方法です。

<div class="container">
  <div class="content">中央の要素</div>
</div>

.container {
  display: flex;
  justify-content: center; /* 水平方向の中央揃え */
  align-items: center; /* 垂直方向の中央揃え */
  height: 100vh; /* ビューポートの高さを指定 */
}

この方法では、justify-content: center; が水平方向の中央揃え、align-items: center; が垂直方向の中央揃えをおこないます。

positionを使用する

記述は長くなりますが、position と transform を使って要素を中央に配置することも可能です。

.container {
  position: relative;
  height: 100vh;
}

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

まとめ

バナーを中央寄せにする方法は用途やレイアウトの構造に応じて異なります。最適な方法を選択することで美しいデザインと整ったレイアウトを実現できます。どの方法を選ぶべきか迷った際には、それぞれの特徴と用途を考慮して決定しましょう。