How would I vertically center child divs? : <p>I was trying out some stuff in CSS on Codepen (jst to get more familiar with CSS), and ran into a problem where I could not vertically center the divs. This confused me, as I was able to move all of the child divs into the center.Thanks for any help!</p>

<p><a href="https://codepen.io/Shayodonn10/pen/xWKgda" rel="nofollow noreferrer">https://codepen.io/Shayodonn10/pen/xWKgda</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>.bg{
  display: block;
  margin-left: auto;
  margin-right: auto;
  background-color: black;
  width: 800px;
  height: 800px;
  left: 50%;
}
.red {
  display: block;
  margin-left: auto;
  margin-right: auto;
  border-radius: 20px;
  width: 100px;
  height: 75px;
  background-image: linear-gradient(to right, #f78ca0 0%, #f9748f 19%, #fd868c 60%, #fe9a8b 100%);
}

.blue{
  position: relative;
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 100px;
  height: 50px;
  background-image: linear-gradient(to top, #fbc2eb 0%, #a6c1ee 100%);;
  top: 50px;
}

.green{
  position: relative;
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 100px;
  height: 50px;
  background-image: linear-gradient(to top, #0ba360 0%, #3cba92 100%);
  top: 50px;

}

.stick{
  position: relative;
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 30px;
  height: 80px;
  background-image: linear-gradient(60deg, #29323c 0%, #485563 100%);
  top: 50px;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="bg"&gt;
&lt;div class="red" /&gt;
&lt;div class="blue" /&gt;
&lt;div class="green" /&gt;
&lt;div class="stick" /&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>
