画面表示について

display: flex;

参考になった記事

CSS - "display"プロパティ

coliss.com

align-items: center

flex アイテムのマージンボックスは、cross-axis 上でライン内の中央に置かれます。アイテムの cross-size が flex コンテナより大きい場合は、両方向へ均等にはみ出します。

参照:

developer.mozilla.org

justify-content: center;

flexアイテムの横方向の整列を指定します。(flex-directionプロパティの値がrow、row-reverseのときは縦方向)
必ずflexコンテナに指定してください。

center ⇒ 各flexアイテムが中央揃えになります。

【CSS】Flexboxのプロパティ(justify-content、align-items、align-self、align-content)を紹介します

height: 100vh;

www.marguerite.jp

min-height

www.htmq.com

min-heightプロパティは、 <IMG>・ <INPUT>・ <TEXTAREA>・ <SELECT>などの領域の高さの最小値を指定する際に使用します。 最小値を指定することで、これらの要素の高さを一定範囲内に収めることができます。

指定方法には、実数値にpxなどの単位をつけて指定する方法と、親ボックスに対する割合を%で指定する方法があります。