もう迷わない！要素（バナー等）を上下左右中央寄せにする方法｜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 として扱われます。

<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	確実な中央配置が可能	記述が長くなる

どの方法を選ぶか迷った場合は、目的や使いやすさに応じて選択しましょう！