CSS Gridレイアウトのalign-contentでdiv内の可変高さのコンテンツを垂直方向に中央揃えする方法

2024-04-06

CSSでdiv内の可変高さのコンテンツを垂直方向に中央揃えする方法

display: flexとalign-items: centerを使う

この方法は、Flexboxレイアウトを利用する方法です。親要素にdisplay: flexを、子要素にalign-items: centerを指定することで、子要素を垂直方向に中央揃えすることができます。

利点

シンプルで分かりやすいコード
多くのブラウザでサポートされている

欠点

IE 10以下ではサポートされていない

コード例

.parent {
  display: flex;
}

.child {
  align-items: center;
}

margin: 0 autoを使う

この方法は、子要素にmargin: 0 autoを指定する方法です。子要素の左右の余白を自動的に調整することで、子要素を水平方向に中央揃えすることができます。

子要素の幅が固定されている必要がある
垂直方向の中央揃えには使えない

.child {
  margin: 0 auto;
}

position: absoluteとtop: 50%を使う

この方法は、子要素にposition: absoluteとtop: 50%を指定する方法です。子要素を絶対配置にして、親要素の高さの50%の位置に配置することで、垂直方向に中央揃えすることができます。

親要素の高さに依存するため、親要素の高さが確定していない場合は使えない

.child {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

display: tableとvertical-align: middleを使う

この方法は、親要素にdisplay: tableとvertical-align: middleを、子要素にdisplay: table-cellを指定する方法です。親要素をテーブルレイアウトにして、子要素をテーブルセルの垂直方向に中央揃えすることができます。

テーブルレイアウトは他のレイアウトと比べて使いにくい

.parent {
  display: table;
  vertical-align: middle;
}

.child {
  display: table-cell;
}

柔軟性の高いレイアウトが作成できる

.parent {
  display: grid;
}

.child {
  place-items: center;
}

上記の5つの方法から、状況に合わせて最適な方法を選びましょう。それぞれの方法の利点と欠点、そして注意点を理解した上で、使い分けることが重要です。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>サンプルコード</title>
</head>
<body>
  <h1>Flexbox</h1>
  <div class="parent-flex">
    <div class="child-flex">
      コンテンツ
    </div>
  </div>

  <h1>margin: 0 auto</h1>
  <div class="parent-margin">
    <div class="child-margin">
      コンテンツ
    </div>
  </div>

  <h1>position: absolute</h1>
  <div class="parent-absolute">
    <div class="child-absolute">
      コンテンツ
    </div>
  </div>

  <h1>display: table</h1>
  <div class="parent-table">
    <div class="child-table">
      コンテンツ
    </div>
  </div>

  <h1>CSS Grid</h1>
  <div class="parent-grid">
    <div class="child-grid">
      コンテンツ
    </div>
  </div>
</body>
</html>

.parent-flex {
  display: flex;
}

.child-flex {
  align-items: center;
}

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

.child-margin {
  margin: 0 auto;
}

.parent-absolute {
  position: relative;
  height: 200px;
}

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

.parent-table {
  display: table;
  height: 200px;
}

.child-table {
  display: table-cell;
  vertical-align: middle;
}

.parent-grid {
  display: grid;
  height: 200px;
}

.child-grid {
  place-items: center;
}

このコードを実行することで、それぞれの方法でコンテンツが垂直方向に中央揃えされていることを確認できます。

注意

上記のコードはあくまでもサンプルです。実際のコードは、状況に合わせて調整する必要があります。

text-align: centerを使う

この方法は、親要素にtext-align: centerを指定する方法です。子要素がインライン要素またはインラインブロック要素である場合にのみ有効です。

子要素がブロック要素の場合は使えない

.parent {
  text-align: center;
}

.child {
  padding-top: 50%;
}

.parent {
  display: grid;
  align-content: center;
}

vh単位を使う

この方法は、子要素の高さにvh単位を使用する方法です。 vh単位はブラウザのウィンドウの高さを基準とした相対単位です。これにより、親要素の高さに関わらず、子要素を垂直方向に中央揃えすることができます。

親要素の高さに依存しない

.child {
  height: 50vh;
}

JavaScriptを使用して、子要素を垂直方向に中央揃えすることもできます。

すべてのブラウザで動作する

JavaScriptの知識が必要

const child = document.querySelector('.child');

const centerChild = () => {
  child.style.top = `calc(50% - ${child.offsetHeight / 2}px)`;
};

window.addEventListener('resize', centerChild);

centerChild();