title: Why does CSS 'align-items' not do anything on my website?
body: <p>Sorry if this is something obvious, but I've searched the internet far and wide, and couldn't find anybody with the same problem as me. I've just recently started learning HTML and CSS and am trying to vertically align the text on my website. justify-content works, but align-items does not.</p>
  <p>I just need someone to point me in the right direction, this has left me completely hopeless.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
      &lt;meta charset="UTF-8"&gt;
      &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
      &lt;title&gt;Document&lt;/title&gt;
      &lt;link rel="preconnect" href="https://fonts.googleapis.com"&gt;
  &lt;link rel="preconnect" href="https://fonts.gstatic.com" crossorigin&gt;
  &lt;link href="https://fonts.googleapis.com/css2?family=Open+Sans&amp;display=swap" rel="stylesheet"&gt; 
  &lt;/head&gt;
  &lt;body&gt;
      &lt;style&gt;
          .center {
              display: flex;
              justify-content: center;
              align-items: center;
          }
          body {
              background-image: linear-gradient(to right, #432371, #9f6976);
          }
          .text {
              font-family: "Open Sans";
              color: white;
              font-size: 50px;
          }
          .link1 {
              color: white;
              font-family: "Open Sans";
              font-size: 20px;
          }
          .link2 {
              color: white;
              font-family: "Open Sans";
              font-size: 20px;
          }
      &lt;/style&gt;
              &lt;h1 class="center text"&gt;Coming Soon.&lt;/h1&gt;
              &lt;a class="link1 center" href="https://google.com"&gt;Link1&lt;/a&gt; 
              &lt;a class="link2 center" href="https://google.com"&gt;Link2&lt;/a&gt;
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>Thanks in advance.</p>