🐼

2024年CSSで新しく追加された「垂直方向の中央揃え」機能

2024/09/16に公開

CSS

tech

対応バージョン: Chrome 123、Firefox 125、Safari 17.4

ついに縦中央揃え機能が追加された。これまで、横方向の中央揃えは簡単に行えたが、
縦方向の中央揃えには専用の機能がなかったため、display: flexやalign-items: centerといった少し複雑な方法を使う必要があった。

今はたった1行の align-content: center だけで縦方向の中央揃えができるようになった。
もうwrapperや複雑な設定なしで、コンテンツを簡単に縦に整列できる。

※このプロパティはChrome 123、Safari 17.4からサポート⭐️

こんなに必要な機能がなんで今になってやっと実装されたのかは謎だけど、実装されて良かった
縦方向の中央揃えをする時には、積極的に活用する！

    <div class="div" style="background-color: skyblue; align-content: center">
      <div>垂直方向の中央</div>
    </div>
    <div class="div" style="background-color: antiquewhite">
      <div>基本</div>
    </div>

他に垂直方向の中央にする方法

table

コードが複雑すぎて読みやすさも悪くなるし、FlexboxやGridのような現代的なレイアウト方式がある今、わざわざdisplay: tableを使う必要はない

    <div class="div" style="background-color: skyblue; display: table">
      <div style="display: table-cell; vertical-align: middle">
        垂直方向の中央
      </div>
    </div>
    <div class="div" style="background-color: antiquewhite">
      <div>基本</div>
    </div>

absolute

絶対位置を使うと、.divの高さが決まっていない場合、子要素の中央揃えが予想通りに動作しないことがある。
レスポンシブデザインも難しくなるし、子要素が親要素の流れから外れることで、他の要素との関係や間隔の計算が難しくなることもある。

    <div class="div" style="background-color: skyblue; position: relative">
      <div style="position: absolute; top: 50%; transform: translateY(-50%)">
        垂直方向の中央
      </div>
    </div>
    <div class="div" style="background-color: antiquewhite">
      <div>基本</div>
    </div>

flexbox

Flexboxは、ウェブが始まってから20年経ってようやく広く使われ始めた。

<div
      class="div"
      style="background-color: skyblue; display: flex; align-items: center"
    >
      <div>垂直方向の中央</div>
    </div>
    <div class="div" style="background-color: antiquewhite">
      <div>基本</div>
    </div>

grid

Gridはさらに後に登場したから、レイアウトや配置がもっと簡単になった。

他に垂直方向の中央にする方法

table

absolute

flexbox

grid

Discussion