title: parent div centered but it stick in the top of page
body: <p>I have a parent div I want to center &quot;quote-box&quot;:</p>
  <pre class="lang-html prettyprint-override"><code>&lt;div class=&quot;warpper&quot;&gt;
  &lt;div id=&quot;quote-box&quot;&gt;
    &lt;h2 id=&quot;text&quot;&gt;ggggg&lt;/h2&gt;
    &lt;p id=&quot;autor&quot;&gt;&lt;/p&gt;
    &lt;button id=&quot;new-quote&quot;&gt;
      &lt;a href=&quot;twitter.com/intent/tweet&quot; id=&quot;tweet-quote&quot;&gt;new qoute&lt;/a&gt;
    &lt;/button&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  <p>CSS code centers the parent, but it centers at the top:</p>
  <pre class="lang-css prettyprint-override"><code>.warpper{
    display: flex;
    justify-content: center;
    align-items: center;
  
  #quote-box{
    width:40%;
    padding:10vw;
    background-color:gray;
    border-radius:2vw;
    text-align:center;
    }
  }
  </code></pre>