Flexbox、Grid、position: absolute、margin: auto：垂直方向中央揃えのベストプラクティス

2024-06-25

HTMLとCSSで垂直方向に中央揃えを実現する方法

このチュートリアルでは、HTMLとCSSを使用して、絶対配置された親 div 要素内の子 div 要素を垂直方向に中央揃えする方法を説明します。3つの主要な方法と、それぞれの長所と短所について解説します。

方法 1： vertical-align: middle を使用する

この方法は、インライン要素またはテーブルセル要素を垂直方向に中央揃えする場合に有効です。

<div class="parent">
  <div class="child">垂直方向に中央揃えされたテキスト</div>
</div>

.parent {
  position: absolute;
  width: 200px;
  height: 100px;
  background-color: #ccc;
}

.child {
  display: inline-block; /* または display: table-cell; */
  vertical-align: middle;
}

利点:

シンプルで分かりやすい
インライン要素とテーブルセル要素にのみ有効

短所:

ブロック要素には適用できない
親要素の高さが固定されている必要がある

方法 2： position: absolute と margin: auto を使用する

<div class="parent">
  <div class="child">垂直方向に中央揃えされたテキスト</div>
</div>

.parent {
  position: absolute;
  width: 200px;
  height: 100px;
  background-color: #ccc;
}

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

ブロック要素とインライン要素の両方に適用できる

position: absolute を使用するため、他の要素と重なり合う可能性がある

方法 3： display: flex を使用する

この方法は、Flexbox レイアウトを使用して、要素を垂直方向に中央揃えする場合に有効です。

<div class="parent">
  <div class="child">垂直方向に中央揃えされたテキスト</div>
</div>

.parent {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 200px;
  height: 100px;
  background-color: #ccc;
}

Flexbox レイアウトのその他の機能を利用できる

Flexbox レイアウトは比較的新しい仕様であり、古いブラウザではサポートされていない可能性がある

シンプルで分かりやすい方法が必要な場合は、vertical-align: middle を使用します。
ブロック要素を垂直方向に中央揃えする必要がある場合は、position: absolute と margin: auto または display: flex を使用します。
Flexbox レイアウトのその他の機能を利用する必要がある場合は、display: flex を使用します。

補足

上記の例では、親 div 要素に固定の幅と高さを設定しています。これは、垂直方向に中央揃えを実現するために必要です。親要素のサイズが動的に変化する場合は、適切な方法で調整する必要があります。
垂直方向に中央揃えに加えて、水平方向に中央揃えも行う場合は、justify-content: center プロパティを追加する必要があります。

方法 1： vertical-align: middle を使用する

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>垂直方向に中央揃え（方法 1）</title>
  <style>
    .parent {
      position: absolute;
      width: 200px;
      height: 100px;
      background-color: #ccc;
    }

    .child {
      display: inline-block; /* または display: table-cell; */
      vertical-align: middle;
    }
  </style>
</head>
<body>
  <div class="parent">
    <div class="child">垂直方向に中央揃えされたテキスト</div>
  </div>
</body>
</html>

CSS

/* 上記の CSS コードは <head> タグ内に記述されています */

解説

このコードでは、以下の要素を作成しています。

親 div 要素: 絶対配置された div 要素で、幅 200px、高さ 100px、背景色 #ccc です。
子 div 要素: インラインブロック要素またはテーブルセル要素で、「垂直方向に中央揃えされたテキスト」というテキストが含まれています。

vertical-align: middle プロパティは、インライン要素またはテーブルセル要素を垂直方向に中央揃えするために使用されます。この方法は、シンプルで分かりやすいですが、ブロック要素には適用できません。

方法 2： position: absolute と margin: auto を使用する

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>垂直方向に中央揃え（方法 2）</title>
  <style>
    .parent {
      position: absolute;
      width: 200px;
      height: 100px;
      background-color: #ccc;
    }

    .child {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
  </style>
</head>
<body>
  <div class="parent">
    <div class="child">垂直方向に中央揃えされたテキスト</div>
  </div>
</body>
</html>

/* 上記の CSS コードは <head> タグ内に記述されています */

この方法は、position: absolute、top: 50%、left: 50%、および transform: translate(-50%, -50%) プロパティを使用して、子要素を垂直方向に中央揃えします。この方法は、ブロック要素とインライン要素の両方に適用できますが、position: absolute を使用するため、他の要素と重なり合う可能性があります。

方法 3： display: flex を使用する

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>垂直方向に中央揃え（方法 3）</title>
  <style>
    .parent {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 200px;
      height: 10

HTMLとCSSで垂直方向に中央揃えを実現するその他の方法

<div class="parent">
  <table>
    <tr>
      <td>
        <div class="child">垂直方向に中央揃えされたテキスト</div>
      </td>
    </tr>
  </table>
</div>

.parent {
  width: 200px;
  height: 100px;
  background-color: #ccc;
}

.child {
  display: inline-block;
  vertical-align: middle;
}

セマンティックでない
すべてのブラウザで同じようにレンダリングされない可能性がある

padding を使用する

<div class="parent">
  <div class="child">垂直方向に中央揃えされたテキスト</div>
</div>

.parent {
  position: relative;
  width: 200px;
  height: 100px;
  background-color: #ccc;
  padding-top: 50%;
}

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

子要素の高さが親要素の高さを超えている場合にのみ機能する

margin-top: auto; を使用する

<div class="parent">
  <div class="child">垂直方向に中央揃えされたテキスト</div>
</div>

.parent {
  width: 200px;
  height: 100px;
  background-color: #ccc;
}

.child {
  margin-top: auto;
}

Grid レイアウトを使用する

<div class="parent">
  <div class="child">垂直方向に中央揃えされたテキスト</div>
</div>

.parent {
  display: grid;
  place-items: center;
  width: 200px;
  height: 100px;
  background-color: #ccc;
}

柔軟で強力

Flexbox レイアウトよりも複雑

どの方法を使用するかは、要件と使用するブラウザによって異なります。シンプルな方法が必要な場合は、vertical-align: middle または padding を使用するなどの方法が適しています。より柔軟な方法が必要な場合は、Flexbox レイアウトまたはGrid レイアウトを使用することを検討してください。

html css vertical-alignment