複数行の文字列で縦方向の中央寄せがうまくいきません

Question

複数行の文字列で中央寄せを綺麗に行いたい

現在LPの模写コーディング(isara)を行なっている中で、左右ではなく上下、
いわゆる縦方向の中央寄せが綺麗に中央へ寄ってくれないので解決策を教えていただきたいです。
自分でググっていくつかは試してみたのですがうまくいかず、もしかしたらコード自体に原因があるのでしょうか？

HTML

<div class="message_1">
      <div class="container">
        <p>スキルアップしてもフリーランスエンジニアとして食べていくことは難しい。<br>フリーランスには <span>プログラミングスキル</span>以外が大切。</p>
      </div>
    </div>

CSS

/* message_1 */
.message_1{
  display:flex;
  width:100%;
  height:150px;
  background-color:#006EA9;
  color:white;
  font-size:20px;
  letter-spacing:2px;
}
.message_1 p{
  flex:1;
}
.message_1 span{
  color:#EBB94C;
}

試したこと

上記のflexで中央寄せにする。
table-cellのvartical-align:middleで中央寄せ
margin:0 autoで中央寄せ
positionでの中央寄せ
上記は全て試しましたが完全に中央に配置されず、真ん中より少し上に配置されます、、、。

言語

HTML5 CSS3　エディターAtom　模写コーディングサイト（https://isara.life/）

Answer 1

flex-direction: column;とかalign-content: center;とかが必要。

【flexboxで上下左右中央揃え - Qiita】
https://qiita.com/junara/items/5089b9f3fac28693a233

Comments

[gerick]

こんな方法があったのですね！
無事解決できました、ありがとうございます！