html - 「vertical-align」を使用した div のテキストの中央揃えが機能しない

Question

タイトルはそれをかなり要約しています。次のコードがあります。

<div class="container">
   <p>Hello world</p>
</div>

そしてCSS：

.container{
    width: 100%;
    height: 50px;    
    background-color: lightblue;
    vertical-align: middle; /* Why you no work!?!? */
}

しかし、テキストはdivで垂直方向に整列していません。ここで明らかに何かが欠けているか、特定の概念を理解していません。何が起こっているのか誰か教えて？

ありがとう！