title: Center parent div vertically based on child element
body: <p>I am hoping to center my parent div height based on my child div height. My goal is to have 3 boxes with a shorter, but wider rectangle centered vertically behind it. Right now I have my parent div shorter and wider than the children, however I cannot seem to center it vertically.</p>
  <p>Here is the ideal outcome:
  <a href="https://i.stack.imgur.com/C6Vof.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/C6Vof.png" alt="my ideal outcome" /></a></p>
  <p>Here is my current version (Please ignore minor differences with text and box colors). :
  <a href="https://i.stack.imgur.com/tdLaM.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/tdLaM.png" alt="current version" /></a></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>.content {
      width: 80%;
      margin: 0px auto;
  }
  
  
  #container .col {
      border: 1px solid #00acd4;
      background-color: white;
      padding-top: 2em;
      padding-bottom: 2em;
      position: relative;
  }
  
  #parent {
      background-color: #f0f9fb;
      max-height: 80px;
  }
  
  #container {
      margin-top: 50px;
      margin-bottom: 50px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous"&gt;
  
  &lt;div id="container"&gt;
    &lt;div id="parent"&gt;
      &lt;div class="content"&gt;
        &lt;div class="row"&gt;
          &lt;div class="col "&gt;
  
            &lt;h3&gt;$500&lt;/h3&gt;
          &lt;/div&gt;
          &lt;div class="offset-1 col"&gt;
  
            &lt;h3&gt;$3500&lt;/h3&gt;
          &lt;/div&gt;
          &lt;div class="col offset-1"&gt;
  
            &lt;h3&gt;50%&lt;/h3&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>