flex-direction: column;で真ん中にしたい

flexで子要素を縦並びにできる
flex-direction: column;

便利ですね

しかしおなじみjustify-cintent: center;は効かない

align-items: center;を使いましょう

×効かない

.flex { display: flex; flex-direction: column; justify-content: center; }
.parent { width: 300px; background-color: pink; }

縦にしたい！

縦にしたい！

縦にしたい！

〇効く

.flex-column{ display: flex; flex-direction: column; align-items: center; }
.parent { width: 300px; background-color: pink; }

縦にしたい！

縦にしたい！

縦にしたい！