【CSS】align-contentについて

どうも、くまだです。

align-contentプロパティのメモ。

align-contentがブロックでも効く

align-contentプロパティは、通常のブロックレイアウトでも効きます。つまり、display: flexを書かなくても1行で縦中央揃えができるということ。

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

.box {
  height: 200px;
  align-content: center;
  background-color: orange;
}

これだけで.boxの中身が縦中央に揃います。

縦中央揃えのためにdisplay: flexを書いていたケースでは、以下のように書きます。

.box {
  height: 200px;
  display: flex;
  align-items: center;
}

align-contentの場合は、シンプルに書けます。

.box {
  height: 200px;
  align-content: center;
}

align-contentに指定できる主な値。

注意点

• 高さがないと効かない：heightやmin-heightで高さが決まっていないと中央揃えにならない
• justify-contentはまだ効かない：横方向（インライン方向）はブロックレイアウトでは効かない。
• インライン要素には効かない：display: inlineの要素はそもそも対象外

ここまで読んでくださりありがとうございました。