Aligning <div> in vertically center : <p>I cannot align <code>#container</code> and its content in the center vertically. I thought adding further <code>&lt;div&gt;</code> tags would be a problematic and I cannot control them.</p>

<p>I want the text and <code>#container</code> to be aligned in the center of <code>.content</code> vertically without adding any extra space.</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>#container {
  display: grid;
  padding: 20px;
  grid-template-areas: 'sideone sideone sidetwo sidetwo sidethree sidethree';
  grid-gap: 20px;
  text-align: center;
}

.content {
  display: table;
  margin: 15px;
  height: 500px;
  width: 100%;
  transition-duration: 0.15s;
  border: 2px solid #3B3B3B;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="content"&gt;
  &lt;div id="container"&gt;
    &lt;div style="grid-area: sideone;"&gt;
      &lt;p&gt;あ - ა&lt;/p&gt;
      &lt;p&gt;い - ი&lt;/p&gt;
      &lt;p&gt;う - უ&lt;/p&gt;
      &lt;p&gt;え - ე&lt;/p&gt;
      &lt;p&gt;お - ო&lt;/p&gt;
    &lt;/div&gt;
    &lt;div style="grid-area: sidetwo"&gt;
      &lt;p&gt;か - კა&lt;/p&gt;
      &lt;p&gt;さ - სა&lt;/p&gt;
      &lt;p&gt;た - ტა&lt;/p&gt;
      &lt;p&gt;な - მა&lt;/p&gt;
      &lt;p&gt;は - ჰა&lt;/p&gt;
    &lt;/div&gt;
    &lt;div style="grid-area: sidethree"&gt;
      &lt;p&gt;き - კი&lt;/p&gt;
      &lt;p&gt;し - ში&lt;/p&gt;
      &lt;p&gt;ち - ჩი&lt;/p&gt;
      &lt;p&gt;に - ნი&lt;/p&gt;
      &lt;p&gt;み - მი&lt;/p&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>
