flexboxを使った上下左右の中央寄せで詰まったのでメモしておく。
flexbox使い方
親要素に、display:flex;を指定する。
すると子要素は自動的にflex itemになる。
「flex-direction」
子要素の配置方向を決める。
row : 子要素が左から右に配置される。
column : 上から下に配置される。
row-reverse : 右から左に配置。
column-reverse : 下から上。
詰まったのが以下↓
flex-directionのcolumnとrowの指定の仕方によって、揃える方向が逆転する。
justify-content：水平方向の揃え方（しかし、flex-direction: column;指定の場合は、垂直方向に揃える。）
align-items：垂直方向の揃え方（しかし、flex-direction: column;指定の場合は、水平方向に揃える。）