title: Display Flex Items Align Center
body: <p>I am trying to make it so the second section or the first section will align center with the top.</p>
  <p>What I don't understand is the relationship between items with display flex vs items that have display block.</p>
  <p><strong>First Question:</strong> Is there a way with flex so the top logo doesn't look &quot;off&quot; center compared to the centered text in the second section?</p>
  <p>Link To Pen: <a href="https://codepen.io/skella1/pen/vYZLdVN" rel="nofollow noreferrer">https://codepen.io/skella1/pen/vYZLdVN</a></p>
  <pre><code>&lt;div class=&quot;header&quot;&gt;
    &lt;img src=&quot;https://via.placeholder.com/100x50&quot; alt=&quot;&quot;&gt;
    
    &lt;p&gt;Text Goes Here&lt;/p&gt;
  &lt;/div&gt;
  &lt;div class=&quot;secHeader&quot;&gt;
    &lt;h1&gt;Welcome&lt;/h1&gt;
    &lt;p&gt;This is a page to login&lt;/p&gt;
  &lt;/div&gt;
  &lt;div class=&quot;content&quot;&gt;
    &lt;div class=&quot;login&quot;&gt;
      &lt;p style=&quot;padding-right: 10px;&quot;&gt;Login&lt;/p&gt;
      &lt;input type=&quot;text&quot;&gt;
      &lt;button&gt;Login&lt;/button&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  
  
  body {
    margin: 0px;
    padding: 0px;
  }
  .header {
    height: 50px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0px;
    img {
      margin: 0 auto;
    }
  }
  .secHeader {
    background-color: #ddd;
    text-align: center;
    display: block;
    line-height: 0px;
    padding: 20px;
    h1 {
      text-transform: uppercase;
      font-weight: 900;
    }
  }
  .content{
      background: url(&quot;http://www.placebear.com/500/300&quot;) center center no-repeat;
      background-size: cover;
    width: 100%;
    height: 100vh;
    position: relative;
    .login {
      width: 100%;    
      height: 100%;
      position: absolute;
      top: 0;
      left: 0px;
      justify-content: center;
      flex-direction: row;
      align-items: center;
      display: flex;
    }
  }
  </code></pre>