【CSS】要素の上下中央寄せ

何度も引っかかってるので備忘録。

◆上下中央寄せ、テキストの場合

上下中央寄せをしたいテキストを内包しているブロックへ

を適用し、Flexコンテナ化。

次に内包テキスト（Flexアイテム）の縦方向を

で中央に指定。

これで可能。

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

このパターンもありだけど、
物によってはフロートが壊れたりして面倒なので、こっちの方が優秀な予感。