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

align-content in block layouts

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

整列レイアウト

対応ブラウザ

機能 デスクトップ モバイル
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
css.properties.align-content.block_context
123
123
125
17.4
123
17.4
1+対応 (バージョン) 未対応 ※注釈あり サブ機能の解説は MDN Web Docs (CC BY-SA 2.5)

基本構文

CSS 
/* Vertical center alignment without Flexbox/Grid */
.center-block {
  height: 300px;
  align-content: center;
}

/* Bottom alignment */
.footer-push {
  min-height: 100vh;
  align-content: end;
}

ライブデモ

Center(center aligned)

align-content in block layouts Center(center aligned) demo.

プレビュー全画面表示

End(bottom aligned)

align-content in block layouts End(bottom aligned) demo.

プレビュー全画面表示

Start(top aligned / comparison)

align-content in block layouts Start(top aligned / comparison) demo.

プレビュー全画面表示

実務での使いどころ

  • 簡易な垂直中央揃え

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

  • コンテンツの下揃え

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

注意点

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

アクセシビリティ

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

参考リンク