ブロック要素も垂直方向に中央寄せできる `align-content`

Posted at 2025-08-26

この記事はなに？

インライン要素の垂直方向の配置には vertical-align プロパティが使えますが、ブロック要素には適用できませんでした。

align-content　は、 display: grid または display: flex を指定したコンテナ要素内で使用するプロパティとして使われてきました。
2024年以降は、ブロック要素のレイアウトをするためのプロパティとして、主要なブラウザで広くサポートされるようになりました。

この記事では、ブロック要素を中央に配置するための align-content の使い方について説明します。

垂直方向の中央寄せ

以下のHTMLとCSSを使用すると、ブロック要素を垂直方向に中央寄せできます。

<div class="container">
  <p class="text">テキスト</p>
</div>

.container {
  align-content: center;
  height: 240px;
  
  //見やすいように装飾を追加
  background-color: #ccc;
}

出力結果は下記のスクリーンショットのようになります。

水平方向と垂直方向の中央寄せ

テキストだけでなく、ボタンなどブロック要素全体を水平方向と垂直方向の両方で中央寄せしたい場合、 margin: auto プロパティを組み合わせて使用すると、簡単に対応できます。

少し装飾要素を足した状態で、先程のHTMLに css を適応します。

装飾要素を足したcss

.container {
  align-content: center;
  height: 240px;

  //見やすいように装飾を追加
  background-color: #ccc;
}

.text{
  margin: auto;
  width: 200px;

  //見やすいように装飾を追加
  background-color: #eee;
  border-radius: 8px;
  padding: 8px;
}