【保存版】HTML・CSSで中央揃えをマスター！Flexboxで簡単レイアウト

2024-05-16

HTML、CSS、Flexbox を使って、左右の要素幅が異なる場合でも中央の要素を中央揃えにする方法

Flexboxは、Webページのレイアウトを柔軟に調整できるCSSレイアウトテクニックです。今回は、Flexboxを使って、左右の要素幅が異なる場合でも中央の要素を中央揃えにする方法を解説します。

解決策

以下の2つのステップで実現できます。

親要素に display: flex を設定
親要素に justify-content: center と align-items: center を設定

詳細解説

親要素に display: flex を設定することで、その要素をFlexコンテナに変換します。Flexコンテナ内の要素は、Flexアイテムと呼ばれるようになります。

.flex-container {
  display: flex;
}

justify-content: center は、Flexアイテムを主軸方向 (横方向) に中央揃えにします。

.flex-container {
  display: flex;
  justify-content: center;
  align-items: center;
}

補足

上記のコードは、左右の要素が単一行に並んでいる場合を想定しています。要素を複数行に並べたい場合は、flex-wrap: wrap を追加する必要があります。
左右の要素がコンテンツの量によって幅が変わる場合は、align-items: stretch を追加することで、Flexアイテムを親要素の高さ全体に伸ばすことができます。

例

<div class="flex-container">
  <div class="item">左側の要素</div>
  <div class="item">中央の要素</div>
  <div class="item">右側の要素</div>
</div>

.flex-container {
  display: flex;
  justify-content: center;
  align-items: center;
}

.item {
  flex: 1; /* 各要素を同等幅に */
  padding: 10px;
  border: 1px solid #ccc;
}

この例では、左右の要素幅が異なっていても、中央の要素は常に中央揃えに表示されます。

上記以外にも、Flexboxには様々なレイアウト機能が用意されています。詳細は以下のドキュメントを参照してください。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Flexbox 中央揃え</title>
  <style>
    .flex-container {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 200px; /* 親要素の高さを設定 */
      background-color: #ccc;
    }

    .item {
      flex: 1; /* 各要素を同等幅に */
      padding: 10px;
      border: 1px solid #ccc;
      text-align: center;
    }

    .item.left {
      width: 80px; /* 左側の要素の幅 */
      background-color: #f00;
    }

    .item.right {
      width: 150px; /* 右側の要素の幅 */
      background-color: #0f0;
    }
  </style>
</head>
<body>
  <div class="flex-container">
    <div class="item left">左側の要素</div>
    <div class="item">中央の要素</div>
    <div class="item right">右側の要素</div>
  </div>
</body>
</html>

このコードを実行すると、以下のようになります。

ポイント

この例では、親要素に高さを設定しています。これは、Flexアイテムが親要素の高さをいっぱいに埋めるようにするためです。高さを設定しない場合は、Flexアイテムが親要素のコンテンツに合わせて高さが調整されます。
左右の要素には、それぞれ異なるクラス名 (left と right) が設定されています。これは、それぞれの要素に個別にスタイルを設定するためです。
flex: 1 プロパティは、各要素を同等幅にするために使用されています。このプロパティを省略すると、要素はコンテンツの量に合わせて幅が調整されます。

応用例

このサンプルコードは、以下のような様々なレイアウトに応用することができます。

ヘッダーとフッターの間にメインコンテンツを中央揃えに配置する
複数の画像を中央揃えに並べる

Flexboxは、Webページのレイアウトを柔軟に調整できる強力なツールです。ぜひ、色々なレイアウトを試してみてください。

Flexbox 以外の方法で中央揃えを実現する方法

テーブルレイアウト

従来のテーブルレイアウトを使用して、中央の要素を中央揃えにすることができます。

<table>
  <tr>
    <td>左側の要素</td>
    <td>中央の要素</td>
    <td>右側の要素</td>
  </tr>
</table>

table {
  width: 100%; /* 親要素の幅を100%に設定 */
  text-align: center; /* 各セルを中央揃えに */
}

この方法は、比較的シンプルな方法ですが、レスポンシブデザインには向いていません。

<div class="container">
  <div class="left">左側の要素</div>
  <div class="center">中央の要素</div>
  <div class="right">右側の要素</div>
</div>

.container {
  position: relative; /* 親要素を相対位置に設定 */
}

.left {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%); /* 垂直方向に中央揃え */
}

.center {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%); /* 垂直方向と水平方向に中央揃え */
}

.right {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%); /* 垂直方向に中央揃え */
}

この方法は、Flexboxと同様に柔軟なレイアウトが可能です。ただし、親要素が相対位置に設定されているため、親要素の子要素に影響を与える可能性があることに注意が必要です。

margin: auto プロパティを使用して、左右の余白を自動的に調整することで、中央の要素を中央揃えにすることができます。

<div class="container">
  <div class="left">左側の要素</div>
  <div class="center">中央の要素</div>
  <div class="right">右側の要素</div>
</div>

.container {
  display: flex; /* 親要素をフレックスコンテナに設定 */
}

.left,
.right {
  flex: 1; /* 各要素を同等幅に */
}

.center {
  margin: auto; /* 左右の余白を自動調整 */
}

この方法は、Flexboxと同様にシンプルで分かりやすい方法です。ただし、左右の要素幅が固定されている場合のみ有効です。

<div class="grid-container">
  <div class="item">左側の要素</div>
  <div class="item">中央の要素</div>
  <div class="item">右側の要素</div>
</div>

.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); /* 列のレイアウト */
  gap: 10px; /* アイテム間の隙間 */
  align-items: center; /* アイテムを垂直方向に中央揃え */
}