Flexboxに挑戦 4 (縦方向の中央寄せ)

フレックスボックスは左右・中央寄せがとても簡単

これ、理解したらとても便利だと思いました。

ん？中央寄せなんて「text-align:center;」で済む話では？

と思うかも知れませんが、縦方向の中央寄せは難しいですよね。

縦位置の中央寄せは「vertical-align:middle;」で指定するわけですが、やってみると効かない。

で毎度、「 vertical-alignが効かない」で検索することになり、「 vertical-align はインライン要素とテーブルセルだけでしか効かない」ということを思い出す(笑)

ブロック要素の「div」で作った領域では、縦方向の位置指定「vertical-align」は効きません。

これを解決するために

(1)divではなくTEBLEを使う
(2)divやPなどのブロック要素を「display:table-cell;」にする

という方法でこれまで回避してきたのですが。

これに加えて、

(3)フレックスボックスを使う

という方法でも可能なわけですね。

フレックスボックスを使ったほうがより簡単

縦方向の中央寄せは

align-items:center;

と指定します。

無指定 justify-content:center; justify-content:center; align-items:center; 中のitemもflex化して中央寄せ中段寄せ

---