title: What's the difference between margin:auto and justify-content / align-items center?
body: <p>To center both horizontally and vertically simultaneously, there are two simple options:</p>
  
  <p>First</p>
  
  <pre><code>.outer {
    display:flex;
  }
  .inner {
    margin:auto;
  }
  </code></pre>
  
  <p>Second</p>
  
  <pre><code>.outer {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  </code></pre>
  
  <p>What's the difference? In what situations would we use one over the other?</p>