Newly available YES。Baseline Widely available。モダンブラウザで使用可能。
レイアウト Newly available

align-content in block layouts

垂直方向の中央揃えは長年 CSS で最も困難な課題のひとつだった。Flexbox や Grid を導入すれば解決できるが、単純なブロック要素内での中央揃えのためだけにレイアウトモードを変更するのは大げさだった。align-content がブロックレイアウトでもサポートされたことで、display を変更せずに垂直方向の配置が可能になった。

整列レイアウト

概要

垂直方向の中央揃えは長年 CSS で最も困難な課題のひとつだった。Flexbox や Grid を導入すれば解決できるが、単純なブロック要素内での中央揃えのためだけにレイアウトモードを変更するのは大げさだった。align-content がブロックレイアウトでもサポートされたことで、display を変更せずに垂直方向の配置が可能になった。

対応ブラウザ

デスクトップ

Chrome 123+
Edge 123+
Safari 17.4+
Firefox 125+

モバイル

Chrome Android 123+
Safari iOS 17.4+
Firefox Android 125+

基本構文

CSS 
/* Flexbox/Grid 不要の垂直中央揃え */
.center-block {
  height: 300px;
  align-content: center;
}

/* 下揃え */
.footer-push {
  min-height: 100vh;
  align-content: end;
}

実務での使いどころ

  • 簡易な垂直中央揃え

    display: flex を追加せずに、通常のブロック要素で子要素を垂直中央に配置できる。最もシンプルな中央揃え手法。

  • コンテンツの下揃え

    固定高さのコンテナ内でコンテンツを下部に配置する。フッターやカード内の CTA 配置に便利。

注意点

  • 対応が 2024 年と比較的新しいため、古いブラウザバージョンでは動作しない。
  • ブロックレイアウトの align-content は block 方向のみに作用し、inline 方向の center は別途対応が必要。

アクセシビリティ

  • 視覚的な配置変更のみで、DOM 順序やスクリーンリーダーの読み上げには影響しない。

参考リンク