title: Flexbox Vertical/horizontally Align Child Elements?
body: <p>Trying to learn Flexbox, So if I wanted something vertically and horizontally center aligned but I also wanted something else within the parent element to be aligned to the top left corner of the page, would I use two containers or is there a way to vertically and horizontally align child elements? I'm so confused.</p>
  
  <p>I appreciate any replies.</p>
  
  <p>HTML</p>
  
  <pre><code>    &lt;!DOCTYPE html&gt;
      &lt;html&gt;
        &lt;head&gt;
          &lt;meta charset="UTF-8"&gt;
        &lt;meta name="viewport" content="width=device-width,initial-scale=1"&gt;
          &lt;title&gt;Elements Website&lt;/title&gt;
        &lt;link rel="stylesheet" href="css/style.css" type="text/css"&gt;
        &lt;link rel="stylesheet" href="css/hover.css" type="text/css"&gt;
        &lt;/head&gt;
        &lt;body&gt;
  
        &lt;div class='container'&gt;
  
           &lt;div class='content'&gt;
  
            &lt;img alt="" width="400" src="image/box1.svg" class="button hvr-grow"&gt;
  
        &lt;/div&gt;
  
      &lt;/div&gt;
  
        &lt;script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"&gt;&lt;/script&gt;
        &lt;/body&gt;
      &lt;/html&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>body{
  
  background-color: azure;
  background-size: cover;
  height:100vh;
  
  }
  
  .container{
  
  display: flex;
  flex-direction: column;
  min-height:100vh;
  justify-content: center;
  align-items: center;
  }
  
  
  .content{
  
  
  
  }
  
  .boxorange{
  
  
  
  }
  </code></pre>