ウェブデザインにおいて、バナーなどの要素を中央に配置することは視覚的なバランスを整える上で重要なポイントです。この記事では、CSSを使用して要素を中央寄せにする方法を解説します。
例えば、デフォルトではバナー画像は左寄せになっていることが多いです。これを中央に配置することで、見た目のバランスを整えデザインを統一できます。
デフォルト:左寄せ
カスタマイズ後:中央寄せ
この例では、CSSを使って中央寄せを指定します。
- Step1CSSで中央余寄せを定義
子テーマのスタイルシートに以下を記述しておきます。一度書いておけば、サイト全体で何度でも繰り返し使えます。
.center-text { text-align: center; }
- Step2HTMLでバナーリンクを囲む
「カスタムHTML」を利用して
<div class="center-text"></div>
でバナーリンクを囲むだけです。<div class="center-text"> <a><img src="banner.jpg" alt="バナー"></a> </div>

バナーを中央寄せにするにはこれだけでOK!
バナーを中央に配置する方法を知りたい方は、ぜひ参考にしてください!
HTMLインラインスタイルとCSS|記述方法の違い
記述方法は2種類あり、以下の特徴があります。
項目 | HTML内 | \推奨/ |
---|---|---|
CSSファイル | ||
適用方法 | HTMLの style 属性 | CSSファイルを使う |
手軽さ | すぐに試せる | スタイルシートへの記述が必要 |
メンテナンス性 | 低い(都度修正) | 高い(共通管理できる) |
可読性 | 低い | 高い |
再利用性 | 低い(ページごとに記述) | 高い(複数ページに適用可能) |
HTMLインラインスタイルの特徴
HTMLの style
属性を直接使う方法です。CSSファイルを作成せずにHTMLだけでデザインを調整できます。
CSSファイル(外部スタイル)の特徴
HTMLの class
や id
を使い、CSSファイルでスタイルを定義する方法です。
使い分けのポイント
一見、「HTMLだけで指定できる方が楽じゃない?」と思われがちですが、長期的なメンテナンスのしやすさを考えると、CSSファイルで記述するのが推奨されます。

単純なレイアウトでもCSS記述一択です。
要素を【左右】中央寄せにする方法
要素を中央に配置する方法にはいくつかのアプローチがあります。
- インライン要素の中央寄せ(text-align:center)
- ブロック要素の中央寄せ(margin-inline:auto)
- Flexboxを使用する方法
- Gridを使用する方法
- positionを使用する方法
インライン要素|text-align:center
を使用する
ブロック要素内のインライン要素を中央揃えにする場合、親要素に text-align: center;
を適用します。この方法はもっともシンプルで特にテキストを手軽に中央配置したい場合に適しています。
インライン要素とはHTMLの要素のうち文字(行)の一部として扱われる要素 のこと。代表的なものとして、<span>
, <a>
, <strong>
, <img>
などがあります。
バナー画像は img
要素で表されることが多いため、インライン要素または inline-block
として扱われます。
要素がインラインの場合のみ適用されます。
display: inline;
- もしくは
inline-block;
<div class="center-text">
<img src="banner.jpg" alt="バナー">
</div>
.center-text {
text-align: center;
}
ブロック要素|margin-inline:auto;
を使用する
ブロック要素を中央揃えにする場合、CSS の margin-inline:auto;
を適用します。
margin:auto;
を使用しても中央寄せは可能ですが、水平方向のみに適用したい場合は margin-inline:auto;
の方が適切です。これは、margin:auto;
が上下左右すべてのマージンに適用されるのに対し、margin-inline:auto;
は左右のみに影響するためです。
<img src="banner.jpg" alt="バナー" class="center-block">
.center-block {
display: block;
margin-inline: auto;
}
Flexboxを使用する
親要素に display: flex;
を指定し、 justify-content: center;
を適用することで子要素を水平方向に中央寄せできます。
<div class="flex-center">
<img src="banner.jpg" alt="バナー">
</div>
.flex-center {
display: flex;
justify-content: center;
}
Grid を使用する
親要素に display: grid;
を指定し、 justify-content: center;
を適用することで子要素を水平方向に中央寄せできます。
<div class="grid-center">
<img src="banner.jpg" alt="バナー">
</div>
.grid-center {
display: grid;
justify-content: center;
}
positionを使用する
position: absolute;
と transform: translate();
を使うことで、要素を中央に配置できます。
<div class="position-center">
<img src="banner.jpg" alt="バナー">
</div>
.position-center {
position: absolute;
left: 50%;
transform: translateX(-50%);
}
要素を【上下左右】中央に配置する方法

画面の上下左右中央に要素を配置する場合、height
の指定が必要です。
Gridを使用する
上下左右中央に配置するには、CSSのGrid を利用する方法が非常にシンプルで直感的です。
place-items
はアイテム自体の中央配置をおこない、place-content
はアイテムが中央に配置された際の全体の配置をコントロールする役割があります。
<div class="container">
<div class="content">中央の要素</div>
</div>
.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: absolute;
と transform: translate();
を使うことで、要素を中央に配置できます。
<div class="container">
<div class="content">中央の要素</div>
</div>
.container {
position: relative;
height: 100vh;
}
.content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
まとめ
バナーを中央寄せにする方法は、レイアウトの構造や用途に応じて異なります。それぞれの方法の特徴を理解し、適切なものを選びましょう。
方法 | メリット | デメリット |
---|---|---|
text-align:center | 簡単に適用可能 | インライン要素にのみ適用 |
margin-inline:auto | ブロック要素の中央寄せに最適 | 親要素の影響を受ける |
Flexbox | 柔軟なレイアウトが可能 | 親要素の設定が必要 |
Grid | レスポンシブに適応可能 | グリッドレイアウトを理解する必要がある |
position + transform | 確実な中央配置が可能 | 記述が長くなる |
どの方法を選ぶか迷った場合は、目的や使いやすさに応じて選択しましょう!
Comment コメントはこちらへ