CSSでエレメントの高さを画面の高さに合わせました。

表示するエレメントを画面の高さに合わせたいと思いました。

height: 100vhを使う

heightに100vhを指定すると画面高さになりました。

 .item {
    min-height: 100vh;
 }

min-heightにしているのは、itemクラスの中身が増えたときに高さが広がってほしいからです。

高さを指定すると中央揃えしたくなる

高さを指定すると内容量のバランスをとるために垂直方向の中央揃えをしたくなります。
align-items: center;を指定して上下垂直方向を中央揃えにしました。

 .item {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
 }

最終的に上記のようになりました。縦方向の画面いっぱいに広がる垂直方向に中央揃えされたテキストが表示されるようになります(☝ ՞ਊ ՞)