title: Center text vertically and horizontally, which exceeds its own parent in Firefox
body: <p>I have the following solution to center my text:</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-css lang-css prettyprint-override"><code>.close-button {
    margin-top: auto;
    padding: 0;
    cursor: pointer;
    border: none;
    border-radius: 5rem;
    background: black;
    color: white;
    position: relative;
    width: 5rem;
    height: 5rem;
    
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-content: center;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;button class="close-button"&gt;
    &lt;div class="mark"&gt;+&lt;/div&gt;
  &lt;/button&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>As you can see, the element is perfectly centered, I believe. However, when I add a big font-size the element containing text appears at random locations. See below:</p>
  <p><div class="snippet" data-lang="js" data-hide="true" data-console="true" data-babel="false">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.close-button {
    margin-top: auto;
    padding: 0;
    cursor: pointer;
    border: none;
    border-radius: 5rem;
    background: black;
    color: white;
    position: relative;
    width: 5rem;
    height: 5rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-content: center;
    
    /*The line below is new*/
    font-size: 8rem;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;button class="close-button"&gt;
    &lt;div class="mark"&gt;+&lt;/div&gt;
  &lt;/button&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>Why is that and how can I fix that, so that the element is centered again?</p>
  <p>Thanks to the answers, I found out that <code>align-items: center;</code> solves my issue. However, this does not work in Firefox.</p>
  <p>Does anybody know why?</p>