Horizontally and vertically flexbox css not working : <p>I'm trying to center the below HTML vertically and horizontally but it's not working vertically, only horizontally. Please could someone help explain why it's not working?</p>

<pre><code>&lt;body&gt;
    &lt;header class="nav"&gt;
        &lt;img class="icon" src="./img/eiffel-tower.svg" attr="Icon made by Monkik from www.flaticon.com"&gt;
        &lt;a class="home-anchor" href="./index.html"&gt;Learn&lt;/a&gt;
    &lt;/header&gt;
        &lt;div class="quiz-container"&gt;
            &lt;p class="word-to-conjugate" id="randomWord"&gt;&lt;/p&gt;
            &lt;input type="text" id="userGuess"&gt;
            &lt;button class="answer-button" id="checkAnswer"&gt;Answer&lt;/button&gt;
        &lt;/div&gt;
&lt;/body&gt;
</code></pre>

<p>My CSS using flexbox trying to center the quiz horizontally and vertically</p>

<pre><code>.quiz-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.word-to-conjugate {
    font-size: 2rem;
    font-family: 'Source Sans Pro', sans-serif;
    text-align: center;
}

input {
    font-family: 'Roboto', sans-serif;
    font-weight: bold;
    padding: 10px;
    font-size: 1.5rem;
    border: 1px solid #333;
    border-radius: 5px;
    margin-bottom: 20px;
}

.answer-button {
    background-color: #505FDF;
    font-size: 1.5rem;
    text-align: center;
    color: #FFFFFF;
    padding: 10px;
    border-radius: 5px;
    border: none;
    font-family: 'Roboto', sans-serif;
    margin-bottom: 3%;
}
</code></pre>
